Css让div在屏幕上居中
2018-04-27 本文已影响0人
青衣诶_
# 让div在屏幕上居中（水平居中+垂直居中）的方法总结
- html代码如下：
html代码
- Css居中方法 （敲黑板）重点
- 首先将元素设置成为`绝对定位`，然后`距顶部和左各50%`，此时的元素还不是居中的，因此需要`通过一定的偏移`将其移到理想位置，两种方法的`主要思想`都是一样的，第一种通过margin-left和margin-top`移动元素自身宽高的一半`，另一种通过`css3`的属性transform的`translate方法`平移元素自身宽高的一半， 代码展示如下：
```css
body {
color: #ffffff;
background: #444444;
}
.book {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
/* 第一种 */
/* 兼容性 未使用css3, ie678 */
/* margin-left: -150px; */
/* margin-top: -150px; */
/*第二种*/
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
```
两种方法第一种的兼容性更加的好一些，因为其中没有使用Css3的属性 对于ie678的兼容比较友好
