css盒子水平垂直居中

一.水平居中

方案一:text-align:center

给父元素添加`text-align:center`;

子元素若为行内元素、行内块元素，文本，则可以实现水平居中。

方案二:单个块级元素水平居中用margin

凡是使用margin来居中（水平居中/垂直居中）子元素必须有宽度/高度，不然margin无效。

子元素宽度必须`小于`父元素宽度。

方案三：多个块级元素水平居中用行内块

1.子元素设置 display: inline-block;
2.给父元素添加 text-align:center;
3.行内块元素的的换行空格会产生间隙影响，想要消除就需给父元素设置 font-size: 0px;但是会影响子元素里的文字不见，可以单独给子元素设置文字大小;

方案四：定位(不需要宽高都行)

子绝父相，top，right,bottom,left 的值是相对父元素尺寸的，然后 margin（必须有宽高） 或 transform 是相对自身尺寸的，组合使用达到居中效果。

给子元素设置绝对定位，父元素设置相对定位
子元素设置： left: 50%;
            margin-left: -150px;或者 transform: translateX(-50%);  
            /*-150px 是自身宽度的一半*/

方案五：任意个元素用flex

原理：设置当前主轴对齐方式为居中
给父元素设置一下两个属性 display: flex;
                       justify-content: center;

二.垂直居中

方案一：line-height

对于单行文本/行内文本/行内块文本  需要设置高度等于行高的值
.parent { 
            height:150px;
            line-height:150px; //高度等于行高的值；
         } 

方案二：多行文本/行内元素/行内块级元素

• 行高:等于 height/行数

.parent{
            height:150px;
            line-height:30px;   /*行高等于 height/行数；*/
        } 

方案三：图片元素

.wrapper {
	height: 200px;
	line-height: 200px;
	font-size: 0;
     }
     
.img     {
	vertical-align: middle;
    }
    /*
   vertical-align: middle;属性的作用并不是将子元素的垂直中点和父元素的垂直中点对齐，而是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。
   而当字体大小为0时，基线的位置就等于中线的位置； 
    */

方案四：单个块级元素有多种方法

4.1- 使用 tabel-cell 实现:

    .parent {
      display: table-cell;
      vertical-align: middle;
    }

4.2- 使用 position 实现:

     #parent {
      position: relative;
    }
    #child {
      height: 100px;
      position: absolute;
      top: 50%;
      margin-top: -50px;//自身高度反向的一半transform:translateY(-50%)
    }
    
    或者
     #child {
      height: 100px;
      position: absolute;
      margin：auto；
      top：0；
      bottom：0；
      }

4.3- 利用 flex 实现

.parent {
        display: flex;
        align-items: center;
      }

方案五：任意个元素：

    .parent {
        display: flex;
        align-items: center;
      }

 或 .parent {
        display: flex;
      }
      .son {
        align-self: center;
      }
      
或 .parent {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

三.水平垂直居中(居中布局)

• 居中布局实际上就是既要水平方向居中，也要垂直方向居中；

原来的样式：

 .father {
        height: 200px;
        background-color: red;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: pink;
      }

注意这里给出了子元素的宽度和高度。

如果没有给定子元素的宽高。那么居中布局只有使用flex布局 / 定位+transform这两种。因为没有给定宽高，那么子元素与之对应的margin值(没有高度，margin-top、margin-bottom无效，没有宽度同理)无效

方案一：用margin+overflow

 .son {
        margin: 50px auto;
      }
      
 .father {
        overflow: hidden;
      }

方案二：给父元素padding(只需一个方位挤压)

要知道父元素的宽高则更好办，给父元素加填充,为父盒子大小减去子盒子大小的一半，然后给父盒子加怪异合模型 
.father {
        padding: 50px 0 0 50px;
        box-sizing: border-box;
      }

方案三：定位 :子绝父相

子元素方位设置50%，并自身反向移动50%，有margin和transform两种

.father {
        position: relative;
      }
.son {
        position: absolute;
        top: 50%;
        left: 50%;
      }
 /*这一步把子元素的左上角移动到父元素的中心*/
 
 接下来应该这样做:反向移动自身的一半
 .son {
        transform: translate(-50%, -50%);
      }
 或者这样做：(子元素需要宽度和高度)
 .son {
        margin: -50px 0 0 -50px;
      }

方案四：定位：上下左右四个方位都为0，然后设置margin：auto

 .father {
        position: relative;
      }
 .son {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }

方案五：flex+ margin：auto

 .father {
        display: flex;
      }
      
 .son {
        margin: auto;//注意单独使用margin：auto，父元素不使用flex,子元素只会水平居中。
        //似乎margin：auto只让margin-left和margin-right的auto生效
      }

方案六：flex设置两轴方向排布

 .father {
        display: flex;
        justify-content: center; /*主轴方向居中*/
        align-items: center; /* 交叉轴方向居中 */
      }

方案七: table-cell+margin

 .father {
        display: table-cell;
        vertical-align: middle; /* 把子元素变成自己的内容，垂直居中 */
      }
      
 .son {
        margin: 0 auto;/* 自己左右居中 */
      }
/* 
  优点: 浏览器的兼容性比较好;
  缺点：vertical-align 属性具有继承性，导致父元素的文本也是居中显示的;
*/

方案八:多行文字水平垂直居中table-cell

 .father {
        display: table-cell; /* 模拟为td单元格，同时形成了 BFC */
        vertical-align: middle; /* 垂直居中*/
        text-align: center; /* 水平居中*/
      }
      
  .son {
        display: inline; //使son元素不在占据一行，而是宽度有内容决定
      }

如下：