(一)利用绝对定位与transform
<div class="parent"> <div class="children"></div> </div>
将父元素定位,子元素如下
.children { position: absolute; top: 50%; left: 50%; -webkit-transform:translate(-50%,-50%); background: black; }
(二)利用flexbox
.parent{ justify-content:center; align-items:center; display: -webkit-flex; }
(三)当子元素的宽高固定,父元素内含有除居中元素外其它元素(空标签也行)或者父元素的高度不为0时
将父元素定位,子元素绝对定位,利用margin负值为子元素宽高的一半来实现。
代码如下:
<div class="parent"> <div class="children"></div> <span></span> </div> .parent{ height:400px;//有除对定位元素外其它元素时可不设,若没有则需要 position: relative; background: red; } .children{ width: 200px; height: 200px; margin: -100px 0 0 -100px; background: black; position: absolute; top: 50%; left:50%; }
(四)利用table
table的td默认内容垂直居中。只要再设置内容水平居中即可
(五)display:table-cell
CSS中有一个用于 竖直居中 的属性 vertical-align,但只有 当父元素为td或者th时,这个vertical-align属性才会生效,对于其他块级元素,例如 div、p等,默认情况下是不支持vertical-align属性的,可以设置块级元素的display类型为table-cell,激活vertical-align属性,但 display:table-cell; 存在兼容性问题,所以这种方法没办法跨浏览器兼容。
<div class="parent">
<div class="child">哈哈</div>
</div>
.parent {
width: 400px;
height: 100px;
background: black;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
background: red;
display: inline-block;
}
display:table-cell的兼容情况
(六)利用定位与margin:auto
<div class="parent">
<div class="child">哈哈</div>
</div>
.parent{
width: 600px;
height: 400px;
background: red;
position: relative;
}
.children{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: black;
}