实现子元素在父元素内垂直水平居中

近来同事问到我css水平居中的问题，加了text-align:center;或者margin:0 auto; 都没用，我就推荐她用flex布局，于是就加了display:flex;justify-content: center;align-items:center;还是没用，因为是远程，我也不知道啥情况，就给她说了一个方法，也是flex布局,给父元素加display:flex;flex-direction:column;子元素加align-self:center;然后就生效了

通过display:flex实现CSS水平居中的原理就是display:flex;flex-direction:column;   flex-direction的区别就是row（行）和column（列）

 

项目中用到水平居中地方挺多，垂直居中，垂直水平居中。。。由此想总结一下：

常用的还是flex布局，屡试不爽

在设置这些之前，首先考虑父元素是否是块元素？

---

水平居中：

    1、父元素为块元素：直接设置text-align:center; 父元素为行内元素：将其设置为块元素，display:block;然后给父元素设置text-align:center;

  以下是父元素为块元素的几种情况：

    2、父子元素定宽的情况下，想要谁居中，就给其加margin:0 auto;

         不定宽时，默认子元素的宽度和父元素是一样的，将其子元素设置为行内块元素，display:inline-block;然后给父元素设置text-align:center;

    3、使用定位属性

         首先设置父元素为position:relative;  设置子元素为position:absolute;left:50%;

         定宽的情况下，给子元素设置margin-left:-子元素宽度的一半px;  或者直接设置transform: translateX(-50%);

         不定宽时，直接设置transform: translateX(-50%);

    4、利用flex布局，无关定不定宽

         给父元素设置display: flex; justify-content: center;即可

---

 

垂直居中：

    1、多行的行内元素：给父元素设置display:table-cell;和vertical-align: middle;即可；

  以下是父元素为块元素的几种情况：

    2、使用定位属性

         首先设置父元素为position:relative;  设置子元素为position:absolute;top:50%;

         定高的情况下，给子元素设置margin-top:-子元素高度的一半px;  或者直接设置transform: translateY(-50%);

         不定高时，直接设置transform: translateY(-50%);

    4、利用flex布局

         给父元素设置display: flex; align-items: center;即可

---

垂直水平居中：结合以上两种即可