网页居中方式总结

第一大类：采用网页流布局居中（不考虑浮动、定位、flex布局）

水平居中方式：

1.text-align:center; 作用于行级元素，但它放在作用域的父级（块元素、行块元素）
2.margin:auto; 自身必须是块级元素，必须要设置宽度
3.padding:设置左右；元素必须是行块元素（但只是看上去居中了）
4.jusitify-content:center

垂直居中方式：

1.vertical-align:middle; 元素必须为行级元素、块级元素
2.padding:设置上下；元素可以是行块元素或块级元素（但只是看上去居中了）
3.line-height:与height属性一致，适用于行块元素、块级元素。对行级元素来说，只适用于内部为单行的行级元素。
4.align-items:center

第二大类：脱离网页流布局

1.采用浮动（采用浮动的要求：没有水平居中的要求，内容为左右分布，设置了块级元素的宽度，内容为单行，或希望一些块级元素处在同一行）

水平居中方式

元素相对于父级来说，本身已经无法实现了，子元素依然按照标准文档流排版，可以按照上面的方式居中。

垂直居中方式

line-height可以做到垂直居中
padding

2.采用定位

设置position为绝对定位、固定布局fixed
可以使用top、right、bottom、left四个属性来控制元素位置
bottom:calc(50% - 0.65625em);(垂直居中)