元素水平垂直居中的六种方法

让某个元素在水平和垂直的方向都居中 内容不限于文字，可能会是图片和其他元素

方法一：定位 + margin负值

 方法二：定位 + transform负值

 方法三：定位 + margin: auto

 方法四：flex布局

 方法五：table布局

将父元素设置 display:table-cell 子元素设置 display: inline-block

 方法六：grid网格布局 

 小结

上述方法不知道元素大小 但仍然可以实现水平垂直居中的有

• 定位 + transform负值
• 定位 + margin: auto
• flex布局
• table布局
• grid网格布局

行内元素的居中布局

水平居中

• text-align: center
• 父元素 display: flex justify-content: center

垂直居中

• 单行文本：height = line-height
• 多行文本：disaply: table-cell; vertical-align: middle

块级元素居中布局

水平居中

• margin: 0 auto
• 定位 + left: 50% + transform: translateX(-50%);
• 定位 + left: 50% + margin-left: 负的自己宽度一半;

垂直居中

• 定位 + top: 50% + transform: translateY(-50%);
• 定位 + top: 50% + margin-top: 负的自己宽度一半
• flex布局