一）利用绝对定位与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>
.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存在兼容性问题，所以这种方法没办法跨浏览器兼容。
哈哈.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
哈哈.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;
}
转载：https://www.cnblogs.com/yaliu/p/5190957.html
网友评论