前端知识点（二）：在CSS中，子元素在父元素中--居中

1.水平居中

子父元素宽度固定，

（1）子元素设置margin：auto;

  (2)  父元素设置text-align:center;display:inline-block;

注意，子元素不能设置浮动，否则居中失效。

2.水平垂直居中

（1）绝对定位+margin（子元素）

方法一：

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;//自身宽高的一半
margin-left: -50px;

方法二：

position: absolute;

top: 0; 

bottom: 0;

left: 0;

right: 0; 

margin: auto;

（2）绝对定位+transform（子元素）

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

（3）弹性盒子（flex布局）（父元素）

display: flex;
justify-content: center;
align-items: center;

（4）表格布局

父元素设置display:table-cell;vertical-align:middle;

子元素设置margin：auto;

另外，内联元素设置水平垂直居中：

text-align:center;

line-height:高;