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