CSS盒子的水平垂直居中-一一网

水平居中写了5种方法，垂直居中写了5种方法，水平垂直居中写了7种方法，实际上只有6种；

一.水平居中

指当前元素在父级元素容器中，水平方向是居中显示的；有以下几种方法:

方案一:text-align:center;

给父元素添加 text-align:center; 
子元素若为行内元素，行内块元素，文本，则可实现水平居中 。
复制代码

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

子元素宽度必须小于父元素宽度，并且要给子元素定宽。

子元素设置 margin:0 auto;
复制代码

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

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 实现:

子绝父相，top、right、bottom、left 的值是相对于父元素尺寸的，然后 margin 或者 transform 是相对于自身尺寸的，组合使用达到垂直居中的目的；

     #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;
      }
复制代码

方案一：用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设置两轴方向排布

 .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;
      }
复制代码