第一种: 利用定位属性实现,但需要知道元素的宽高
<div class="box"></div><style>.box{weight:200px;height:400px;<!--给元素添加定位属性-->position:absolute;<!--设置元素的定位位置,距离上,做都为50%-->left:50%;top:50%;<!--设置元素的左外边距,上外边距为宽高的负1/2-->margin-left:-100px;margin-top:-200px;<!--或者简写-->margin: -200px 0 0 -100px; //四个值分别对应,上,右,下,左}*优点:兼容性好; 缺点:必须知道元素的宽高;</style>
第二种: 利用定位属性实现,不用知道元素的宽高
<div class="box"></div><style>.box{weight:200px;height:400px;<!--把元素变成定位元素-->position:absolute;<!--设置元素的定位位置,距离上,做都为50%-->left:50%;top:50%;<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->transform:translate(-50%,-50%)}*这是css3里的样式;优点:不需要知道元素的宽高;缺点:兼容性不好，只支持IE9+的浏览器</style>
第三种:利用定位属性的四个值结合margin实现
<div class="box"></div><style>.box{weight:200px;height:400px;<!--把元素变成定位元素-->position:absolute;<!--设置元素的定位位置,距离上,做都为50%-->left:0;top:0;right:0;bottom:0<!--设置元素的margin样式值为 auto-->margin:auto;}*兼容性较好，缺点:不支持IE7以下的浏览器</style>
以上三种是使用定位属性实现的垂直水平居中,下面是弹性布局中实现的元素垂直水平居中的方法
display:flex实现垂直水平居中
<!DOCTYPE html><html><heade><style>.box{display:flex; //将外层div设置为弹性容器height:200px;width:400px;justify-content:center; //水平方向居中align-items:center; // 垂直方向居中}.item{width:50px;height:40px;}</style></heade><body><div class="box"><div class="item1></div><div class="item2></div><div class="item3></div><div class="item4></div><div class="item5></div></div></body></html>
