实现div垂直水平居中的10种方法

实现div垂直水平居中的10种方法

1 弹性布局flex

第一种
父级对自己元素进行垂直居中，居中属性只要定义在父元素中即可

 .father{
            width: 200px;
            height: 200px;
            background: #000; 
            display: flex;
            flex-direction: row;
            justify-content: center;//让子元素水平居中
            align-items: center;//让子元素垂直居中
        }
        .son{
            width: 100px;
            height: 100px;
            background: red; 
        }

2 弹性盒布局flex 第二种 让子元素用外边距自动顶开

 .father{
            width: 200px;
            height: 200px;
            background: #000;
            display: flex;
        }
        .son{
            width: 100px;
            height: 100px;
            background: red; 
            margin: auto;
        }

3弹性盒布局 子元素脱离父级的align-items属性

  .father {
            width: 200px;
            height: 200px;
            background: #000;
            display: flex;
        }

        .son {
            width: 100px;
            height: 100px;
            background: red;
            align-self: center; 
            margin: auto;
        }

4 绝对定位-父相子绝-第一种四边定位为0，margin-auto

 .father1 {
            width: 200px;
            height: 200px;
            background: #000;
            position: relative;
        }

        .son1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

5 绝对定位-父相子绝-相邻两个定位+margin负值

.father2 {
            width: 200px;
            height: 200px;
            background: #000;
            position: relative;
        }

        .son2 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }

6绝对定位-父相子绝-已知父子宽高直接计算定位

 .father3 {
            width: 200px;
            height: 200px;
            background: #000;
            position: relative;
        }

        .son3 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 50px;
            left: 50px;
        }

7父相子绝-子元素transfrom属性

.father {
            width: 200px;
            height: 200px;
            background: #000;
            position: relative;
        }

        .son {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 50%;//向右移动50%
            top: 50%; //向上移动50%
           //此时子元素的左下直角在父元素的中心点中，接下来需要把子元素的中心点移动到父元素的中心点位置中
            transform: translate(-50%, -50%);
            //变形，子元素向左移动自身宽度的50%负值，向上移动自身高度的50%,向左向右移动则为正值
        }
<!-- translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 -->
    <!-- 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 
 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，
 以使其居于中心位置。 -->

8 利用table特征，只对表格有效

*在子元素没有设置宽高度和数量时使用
注意：table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height。

.father{
    width: 200px;
    height: 200px;
    background: #000;
    display: table; 
    margin: 40px;
    }
    .son{
        width: 100px;
        height: 100px;
        background: red;  
        margin:25% auto;
        
    }

9 利用table-cell属性

注意：
目前IE8+以及其他现代浏览器都是支持此属性的但是IE6/7 不可以

 <!--  适用场景：IE6\7不兼容 -->
    <!-- 
    display 为 table-cell，激活 vertical-align 属性，
      display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。
        使用场景：容器内容居中，并不想脱离文档流 
优点：。好处是不用添加多余的无意义的标签，
1.内容溢出会将父元素撑开。2.内容宽高，容器宽高均不用care。3兼容IE9以下
缺点：1.不适用于Modal弹层这种盖住页面内容的布局   由于display:table-cell的原因，它的兼容性不是很好，不兼容 IE6、7。
     -->

  .father {
            width: 200px;
            height: 200px;
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            display: table-cell;
            vertical-align: middle;//使子元素垂直居中
            //vertical-align 只影响inline或者inline-block的，所以div.child设置vertical-align就能居中了。
            text-align: center;//使子元素水平居中
        }

        .son {
            display: inline-block;
            width: 100px;
            height: 100px;
           background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
        }

或者
 .father {
            width: 200px;
            height: 200px;
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            display: table-cell;
            vertical-align: middle; 
        }

        .son { 
            width: 100px;
            height: 100px;
            margin: auto;
           background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
        }

10 父相子绝+calc()动态计算实现水平垂直居中

 .father {
        position: relative;
        border: 1px solid #f40;
        background-color: #f30;
        width: 80vw;
        height: 80vh;

    }

    .son {
        position: absolute;
        width: 30vw;
        height: 30vh;
        background-color: #ff0;
         left: calc(50% - 15vw);
        top: calc(50% - 15vh);
          
    }

11使用grid

 .father{
            background: #000;
            width: 200px;
            height: 200px;
            	display: grid;   
                
        }
        .son{
            background: red;
           justify-self: center; //水平居中
           /* align-self: center; */
           /* margin: auto; */
            width: 100px;
            height: 100px;
            /* 通过子层的align-self和justify-self来做到垂直居中。 */
        }