一: 元素水平居中
1. 定宽时, margin 方式, 必须满足的条件
被居中的元素宽固定
元素是块级元素或者设置为 display:inline-block|block
元素的左右 margin 设为 auto
2. 定宽时, 定位方式, 必须满足的条件
元素宽固定
元素绝对定位, left 为 50%
元素的 margin-left 为元素宽的一半 (负值)
适用于垂直居中, 将 margin-top 设为高的一半
水平垂直居中时, 将这两个组合起来即可
3. 不定宽时, 定位方式, 必须满足的条件
用 CSS3 的 transform:translate, 让它自己向上向左移动自身宽高的一半
IE9+
4. 文字水平居中
单行文字用 text-align:center
多行文字参照块居中
5. flex 布局
justify-content 实现主轴居中
aign-items 实现交叉轴居中
结合使用实现水平垂直居中
举个栗子
如果块级元素中的行内元素 inline | 行内块元素 inline-block | inline-table | inline-flex 居中或者文字居中, 用 text-align:center
- <div class="center"><span>inline hello world</span></div>
- .center{
- width: 500px;
- height: 200px;
- border: 1px solid #000;
- text-align: center;
- }
定宽的块级元素, 用 margin:0 auto
- <div class="center">
- <div class="block">block hello</div>
- </div>
- .center{
- width: 500px;
- height: 200px;
- border: 1px solid #000;
- }
- .block{
- width: 200px;
- border: 1px solid #00f;
- // 整个块相对于父元素 center 居中
- margin: 0 auto;
- }
不定宽的块状元素水平居中
- // 给该不定宽的元素设置为 inline-block, 父元素用 text-align:center; 也适用于定宽的情况
- .center{
- width: 500px;
- height: 200px;
- border: 1px solid #000;
- text-align: center;
- }
- .block{
- border: 1px solid #00f;
- display: inline-block;
- }
定宽元素定位方式水平居中
- .center{
- width: 500px;
- height: 200px;
- border: 1px solid #000;
- position: relative;
- }
- .block{
- width: 200px;
- border: 1px solid #00f;
- position: absolute;
- left: 50%;
- margin-left: -100px;
- }
二: 元素垂直居中
1. 定位方式, 与水平方式类似
transform:translate(0,-50%) 即可
2. 单行文本垂直
将文本的 line-height 设置父元素的高度
3. 在不考虑浏览器兼容性问题时, 用 flex 布局是最好的
容器 flex 布局
项目的 margin 为 auto
举个栗子
单行文本垂直居中
- <div class="center"><span>inline hello world</span></div>
- .center{
- width: 500px;
- height: 200px;
- border: 1px solid #000;
- }
- span{
- line-height: 200px;
- }
定高时, 定位方式, 垂直居中
- .center{
- width: 500px;
- height: 200px;
- border: 1px solid #000;
- position: relative;
- }
- .block{
- width: 200px;
- height: 100px;
- border: 1px solid #00f;
- position: absolute;
- top:50%;
- margin-top: -50px;
- }
三: 水平垂直居中
水平垂直居中实际上是水平居中和垂直居中的结合, 单独拆分开可以实现某个方位的居中
举个栗子
flex 布局, 水平垂直布局
- // justify-content 和 align-items 结合使用, 实现水平垂直布局
- .center{
- width: 500px;
- height: 200px;
- border: 1px solid #000;
- display: flex;
- // 1. 主轴方向, 水平居中
- justify-content: center;
- // 2. 交叉轴方向, 垂直居中
- align-items:center;
- // 3. 两者结合, 水平垂直居中
- }
flex 布局, 水平垂直居中
- .center{
- width: 500px;
- height: 200px;
- border: 1px solid #000;
- display: flex;
- }
- .block{
- width: 200px;
- height: 100px;
- border: 1px solid #00f;
- // 1. 每个项目的 margin 设置为 auto, 实现水平垂直居中
- margin: auto;
- // 2. 水平居中
- margin : 0 auto;
- // 3. 垂直居中
- margin : auto 0;
- }
定宽高时, 绝对定位实现水平垂直居中, 常用于弹出框
- .center{
- width: 500px;
- height: 200px;
- border: 1px solid #000;
- position: relative;
- }
- .block{
- width: 200px;
- height: 100px;
- border: 1px solid #00f;
- position: absolute;
- top: 0;
- left:0;
- bottom: 0;
- right: 0;
- margin: auto;
- }
不定宽高时, 水平垂直居中, 定位方式, transform
- .center{
- width: 500px;
- height: 200px;
- border: 1px solid #000;
- position: relative;
- }
- .block{
- border: 1px solid #00f;
- position: absolute;
- // 1. 单独设置 left,translate(-50%,0) 即可实现水平居中
- // 2. 单独设置 top,translate(0,-50%) 即可实现垂直居中
- left: 50%;
- top: 50%;
- -webkit-transform: translate(-50%,-50%);
- -ms-transform:translate(-50%,-50%);
- -0-transform:translate(-50%,-50%);
- transform: translate(-50%,-50%);
- }
四: 总结
1. 最好不使用定位方式, 因为它对整体的布局影响很大.
2. 不考虑兼容性时, 用 flex 布局
3. 元素被放置在半像素位置时, 用 transform-style:preserve-3d 解决
来源: http://www.jianshu.com/p/b78320dfd9ad