前端学习笔记_css常见居中方式

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);
  }

以上就是一些常见的居中方式。