CSS各类居中的实现

1.水平居中

• 对于行内元素，使用text-align: center;可达到居中目的。将text-align作用在块级元素上，可以使块内元素的文字、图片、和行内元素水平居中。但不能使块级元素居中,即text-align属性只能针对文本文字和img标签，对其他标签无效。
• 对于块级元素 设置 margin: 0 auto 可达到居中目的
  当希望页面宽度固定，整体居中

#layout只用于控制宽度居中，别再给其他样式了
.layout{
width:XXX px;
margin:0 auto
}

2.垂直居中(9种方式实现垂直居中)

1.当希望文字段落处于居中，内容变化时仍然居中，对父容器的上下padding设置相同值即可。例如padding:30px 0;
2.对于单行的行内元素，设置line-height(行高)值与height值相等。
3.绝对定位+margin-top:-0.5* height实现垂直水平居中
指子元素在父框中保持垂直水平绝对居中，即使父框发生移动

position:absolute;
left:50%;
top:50%;
margin-left:-0.5*width px; 
margin-top:-0.5*height px;

4.绝对定位+ transform: translate(-50%,-50%);
当子元素宽度长度可变，仍希望它在父元素中保持垂直水平绝对居中，用绝对定位+transform:translate(-50%,-50%);相对于自身发生偏移，代替margin-left和margin-top。

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

5.table自带功能
6.100% 高度的 afrer before + inline block+vertical-align:center
vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
vertical-align实现图片在盒内的居中1

通过增加行内元素，并将其设置为inline-block属性

7.div 装成 table, display: table-cell+vertical-align: middle
vertical-align实现图片在盒内的居中2

将图片display属性设置为table-cell，此方法更便捷