css实现垂直水平居中的方法多种，各种方法各有优劣，查阅网上资料，自己总结于此，方便日后应用。
1. 绝对定位居中
.box {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
overflow: auto;
width: 50%;
height: 50%;
margin: auto;
}
优点：
- 支持跨浏览器，包括IE8-IE10.
- 无需其他特殊标记，CSS代码量少
- 支持百分比%属性值和min-/max-属性
- 只用这一个类可实现任何内容块居中
- 不论是否设置padding都可居中（在不使用box-sizing属性的前提下）
- 内容块可以被重绘
- 完美支持图片居中
缺点：
- 必须声明高度
- 建议设置overflow:auto来防止内容越界溢出
- 在Windows Phone设备上不起作用
2.负外边距居中
块元素尺寸已知，外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding）的一半，再加上top: 50%; left: 50%;
.box{
position: absolute;
top: 50%; left: 50%;
width: 200px;
height: 200px;
padding: 60px;
margin-left: -130px;
margin-top: -130px;
}
优点：
- 兼容IE6，7
缺点：
- 不能自适应。不支持百分比尺寸和min-/max-属性设置。
- 内容可能溢出容器。
- 边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根- 据不同情况。
3. Transforms居中
.box{
position: absolute;
top: 50%; left: 50%;
width: 50%;
margin: 0 auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
优点：
- 内容可变高度
缺点：
-
IE8不支持
-
属性需要写浏览器厂商前缀
-
可能干扰其他transform效果
-
某些情形下会出现文本或元素边界渲染模糊的现象
4. Table-Cell居中
HTML
<div class="container">
<div class="box">
<div class="centent">
</div>
</div>
</div>
CSS
.container {
display: table;
width: 500px;
height: 500px;
}
.box {
display: table-cell;
vertical-align: middle;
}
.centent {
width: 50%;
margin: 0 auto;
}
优点：
- 高度可变
- 内容溢出会将父元素撑开
- 跨浏览器兼容性好
缺点：
- 需要额外html标记
5. Flex居中
.container {
display: flex;
flex-direction: column; /* 改变排列方向 */
justify-content: center;
align-items: center;
}
优点：
- 内容块的宽高任意，优雅的溢出
- 可用于更复杂高级的布局技术中
缺点：
- IE8/IE9不支持。
- Body需要特定的容器和CSS样式。
- 运行于现代浏览器上的代码需要浏览器厂商前缀。
- 表现上可能会有一些问题
网友评论