首页
文章
留言
首页
文章
留言
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
相关文章
HTML5常用特性总结
CSS设置图片水平及垂直居中
jquery.tmpl使用总结
JavaScript之window.location
JavaScript常用函数总结
全部分类
前端
后端
运维
架构
算法
数据库
移动应用
桌面应用
程序开发
热门标签
Python
Sphinx
C++
CSS
GUI
多线程
Kafka
JavaScript
Redis
Qt
PHP
CentOS
Supervisor
MySQL
Shell
NoSQL
Kubernetes
Docker
爬虫
MongoDB
Composer
Git
macOS
Android
Lua
Linux
Nginx
Objective-C
iOS
HTML
Elasticsearch
OpenResty
热门文章
iOS开发之多线程
Composer使用总结
PHP开发之字符串处理
Elasticsearch详解
Redis缓存击穿、穿透、雪崩
OpenResty+Lua+Kafka收集日志
Git使用总结
Python爬虫之Beautiful Soup的使用
iOS开发之类与类扩展
CSS让元素水平垂直居中