CSS实现块级元素水平垂直居中的3种常用方式

CSS实现块级元素水平垂直居中

方法一：使用绝对定位 + transform（在子元素中添加样式）

index.php/tags-41973.html" >���方法不要求父元素的宽高确定！

（）

.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;      }