首页
文章
留言
首页
文章
留言
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设置图片水平及垂直居中
HTML5常用特性总结
JavaScript之window.location
JavaScript常用函数总结
jquery.tmpl使用总结
全部分类
前端
后端
运维
架构
算法
数据库
移动应用
桌面应用
程序开发
热门标签
iOS
OpenResty
CSS
Git
NoSQL
JavaScript
Sphinx
Supervisor
Nginx
Linux
Android
Shell
MySQL
CentOS
Composer
Docker
Lua
Elasticsearch
C++
Python
MongoDB
Redis
macOS
多线程
PHP
Kubernetes
Qt
爬虫
HTML
GUI
Objective-C
Kafka
热门文章
OpenResty+Lua+Kafka收集日志
Redis缓存击穿、穿透、雪崩
10种常见的软件架构模式
macOS常用命令
Docker使用总结
C/C++基础知识总结
jquery.tmpl使用总结
Elasticsearch详解
Nginx常用配置说明
HTML5常用特性总结