CSS实现块级元素水平垂直居中
方法一:使用绝对定位 + transform(在子元素中添加样式)
此方法不要求父元素的宽高确定!
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
方法二:使用绝对定位 + margin: auto(在子元素中添加样式)
此方法不要求父元素的宽高确定!
.box{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
方法三:父元素使用flex布局,设置相关属性值为center(在父元素中添加样式)
此方法要求父元素的高度是确定的,百分比形式的高度将不能生效。
.parent{
display: flex;
justify-content: center;
align-items: center;
}