css中4种居中div的方法

方法1:
Flex layout
在父容器内添加以下样式:
display: flex;
justify-content: center;
align-item: center;

方法2:
Margin auto
在子容器内添加以下样式:
margin: 0 auto;

方法3:
Text-align和Inline-block
在父容器内添加以下样式:
text-align: center;
在子容器内添加以下样式:
display: inline-block;

方法4:
2D Transform
在子容器内添加以下样式:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);