CSS水平垂直对齐方式

CSS布局-水平和垂直对齐

盒子水平居中
要水平放置块元素（例如<div>），请使用margin：auto;
设置块级元素的宽度将防止其延伸到容器的边缘。
然后，元素将占据指定的宽度，剩余空间将在两个外边距之间平均分配：
注意：如果未设置块级元素的width属性（或将其设置为100％），则margin：auto;中心对齐无效。

文本水平居中
如果有一个div盒子，盒子中有文本等元素，则在div中加上属性text-align: center居中其中的文本

图片水平居中
要使图像居中，请将左右外边距设置为auto并将其设置为块元素

左右对齐-使用绝对定位

对齐元素的一种方法是使用position：absolute ;

注意：绝对定位的元素将从正常流中删除，并且可能与元素重叠。

左右对齐使用浮动
（略）
垂直居中-使用填充
当盒子没有高度的时候需要垂直居中可以使用上下内边距垂直居中盒子中的元素
当盒子没有大小，直接设置他的上下内边距，那么它所包含的元素就会自动垂直居中

同时水平和垂直居中
同时使用 padding 和text-align: center:

使用行高垂直居中
另一个技巧是使用line-height属性，其值等于height属性
这个方法是在盒子有高度的情况下使用

使用position&&transform
If padding and line-height are not options, another solution is to use positioning and the transform property:（此处略）

使用Flexbox
（此处略）