div水平垂直居中

div水平垂直居中

1.flex

display: flex;
align-items: center;
justify-content: center;

2.position

父元素：绝对定位

子元素：相对定位，会将元素都转为行内块

调整子元素的位置的方法：

子元素left:50%;top:50%,
   无需宽高transform:translate(-50%,-50%)
   需要宽高，margin-left/margin-top子元素宽高的一半
子元素left:0;top:0;right:0;bottom:0
   需要宽高，margin:0,auto;

3.grid

display:grid;
place-item:center;