对齐方式vertical-align、text-align、align-items、justity-content区别

（1）text-align

  实现水平居中，比如我们要实现块状元素(block)内，子元素的水平居中;比如我们要实现div2元素在父元素div1内的居中;

<style>
  .div1{
      text-align:center
  }
  .div2{
      display:inline-block
  }
</style>



<div class="div1">
   <div class="div2"></div>
</div>

实现效果为：

 

 

关键：要实现这种水平居中，在设置父元素具有text-align:center属性的基础上，必须设置子元素（要居中

的元素）的display:inline-block或者display:inline，即只能实现行内块的水平居中。

 

（2）vertical-align

vertical-align属性实现垂直居中,要实现div1父元素内的子元素div2，让div2实现垂直居中，我们可以这样设置：

<style>
 .div1{
    display:table-cell;
    vertical-align:middle;
  }

  .div2{
      display:inline-block
  }
</style>



<div class="div1">
   <div class="div2"></div>
</div>

实现的效果为：

注：简单的实现垂直居中，我们可以发现并不需要对子元素进行特殊设置，我们只需要设置父元素的

display:table-cell;vertical-align:middle 之后就能实现垂直方向的居中。（这种方式实现的垂直居中，会

导致水平不居中）

 

 align-items: center与 justify-content: center

display: flex;
align-items: center; /* 弹性盒子flex 元素位于容器的中心设置弹性盒子元素在垂直方向上（纵轴）的对齐方式。*/
justify-content: center; /* 弹性盒子flex 元素位于容器的中心设置弹性盒子元素在主轴（横轴）的对齐方式*/

 

display:table-cell属性简介

display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置，表现几乎类似一个td元素。