html元素垂直、水平对齐的多种方式

完美居中的多种方式

1.弹性布局方式

给父容器添加伸缩布局：display:flex;和 justify-content: center;align-items: center;

就可以完成容器内元素，完美居中

2.定位方式

给父容器添加相对定位：position:relative;

子元素添加绝对定位，position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);

3.定位方式2

给父容器添加相对定位：position:relative;

子元素添加绝对定位，

position:absolute;

top:0;

left:0;

bottom:0;

right:0;

margin:auto;

4.定位方式3

给父容器添加相对定位：position:relative;

子元素添加绝对定位，position:absolute;top:50%;left:50%;

利用margin，左移自身的一半，上移自身的一半

5.行内块方式

将元素变为行内块，并基线对齐

父元素，垂直，水平居中即可

6.弹性布局+margin

父元素添加：display:flex;

子元素添加：margin:auto;

只能居中一个子元素