首页
文章
留言
首页
文章
留言
CSS让元素水平垂直居中
2016 年 11 月 11 日
前端
CSS
Transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。还可以用来对元素进行居中布局。 很早以前了解过当元素是固定宽度和高度的时候，水平垂直高居中的方法可以设置 `margin` 的负值来使其居中，这个负值是元素的宽和高的一半，比如宽高是 `100px`，那么就用 `margin-left: -50px；margin-top: -50px` 这样的写法。但如果这个元素的宽高是用百分比表示呢？ 如果使用百分比来设置宽高的话，以前哪个负值方法已经用不上了，这个我们发现在一个小的窍门，就是使用 CSS3 中的 `transform` 的 `translate` 转换属性。下面来看代码实例： ##### HTML代码： ```html <div class="center">您可以尝试改变浏览器大小，这个元素依然是水平垂直居中的哦！</div> ``` ##### CSS代码： ```css .center { position: absolute; top: 50%; left: 50%; width: 50%; height: 30%; padding: 20px; text-align: center; background: #393; color: #fff; webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } ```
0
相关文章
CSS设置图片水平及垂直居中
JavaScript之window.location
JavaScript常用函数总结
jquery.tmpl使用总结
HTML5常用特性总结
全部分类
前端
后端
运维
架构
算法
数据库
移动应用
桌面应用
程序开发
热门标签
HTML
CentOS
Kubernetes
MySQL
Python
Qt
Shell
Android
GUI
Docker
iOS
爬虫
多线程
MongoDB
Composer
macOS
Nginx
Sphinx
Kafka
Elasticsearch
PHP
Linux
NoSQL
Objective-C
Redis
C++
Lua
Supervisor
OpenResty
JavaScript
Git
CSS
热门文章
Redis、MemCache、MongoDB比较
macOS常用命令
Nginx常用配置说明
OpenResty+Lua+Kafka收集日志
Elasticsearch详解
Supervisor使用总结
Git使用总结
CentOS常用命令总结
Qt实现TCP通讯
HTML5常用特性总结