HTML结构如下
<div class="parent">
<div class="child">我爱前端</div>
</div>
想要child横向居中，如何做呢？
text-align: center; //父元素
display: inline-block; //子元素
设置父元素居中，子元素为inline-block即可。但是，ie6 7下的块元素不支持 display: inline-block;，可用：
*display: inline;
*zoom:1;
或者直接设置child:
.child{
display: table;
margin: 0 auto;
}
或者：
.parent{
position: relative;
}
.child{
position: absolute;
left:50%;
transform: translateX(-50%);
}
或者：
.parent{
display: flex; //css3新增
justify-content: center; //弹性盒子元素将向行中间位置对齐。
}
display: flex;IE10及以上部分支持， 比较适合移动端使用。
垂直居中？
.parent{
display: table-cell; //设置单元格
vertical-align: middle; //把此元素放置在父元素的中部。
}
vertical-align 属性设置元素的垂直对齐方式
或者：
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
或者：
.parent{
display: flex;
align-items: center; //弹性盒子元素在该行的侧轴（纵轴）上居中放置。
}
综合以上居中方式，可以得出下面的居中显示：
.parent{
display: flex;
justify-content: center;
align-items: center;
}
或者：
.parent{
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child{
display: inline-block;
}
亦或者：
.parent{
position: relative;
}
.child{
position: absolute;
left:50%;
top:50%;
transform: translate3d(-50%,-50%,0);
}
以上就是一些常见的居中方式。
