CSS设置div水平垂直居中

本节主要介绍了几种常见的CSS设置div水平垂直居中的方法

方法1： 

子绝父相，利用left，top属性距父盒子偏移50%，但是因为子盒子自身是有宽度的，所以要将子盒子往相反方向偏移自身的一半。

   <style>
       * {
        margin: 0;
        padding: 0;
       }

       body {
        background-color: bisque;
       }

       .container {
        width: 300px;
        height: 300px;
        background-color: green;
        margin: auto;
        margin-top: 50px;
        position: relative;
       }

       .box {
        width: 200px;
        height: 100px;
        background-color: aquamarine;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -50px;
       }
    </style>
    <div class="container">
        <div class="box"></div>
    </div>

方法2：

利用CSS3中的transform属性。 思想同上，transform: translate(-50%,-50%);

    <style>
       * {
        margin: 0;
        padding: 0;
       }
       
       body {
        background-color: bisque;
       }

       .container {
        width: 300px;
        height: 300px;
        background-color: green;
        margin: auto;
        margin-top: 50px;
        position: relative;
       }

       .box {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
       }
    </style>

    <div class="container">
        <div class="box"></div>
    </div>

方法3：

通过position定位实现，通过将子元素上下左右的偏移值全设为0，再利用margin:auto;

   <style>
       * {
        margin: 0;
        padding: 0;
       }

       body {
        background-color: bisque;
       }

       .container {
        width: 300px;
        height: 300px;
        background-color: green;
        margin: auto;
        margin-top: 50px;
        position: relative;
       }

       .box {
        width: 200px;
        height: 100px;
        background-color: aquamarine;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
       }
    </style>

    <div class="container">
        <div class="box"></div>
    </div>

 方法4：

flex布局 父元素 display:flex 子元素 margin: auto

    <style>
       * {
        margin: 0;
        padding: 0;
       }

       body {
        background-color: bisque;
       }

       .container {
        width: 300px;
        height: 300px;
        background-color: green;
        margin: auto;
        margin-top: 50px;
        display: flex;
       }

       .box {
        width: 200px;
        height: 100px;
        background-color: aquamarine;
        margin: auto;
       }
    </style>

    <div class="container">
        <div class="box"></div>
    </div>

 方法5：

flex布局 父元素 display:flex;  justify-content:center; align-items:center;

    <style>
       * {
        margin: 0;
        padding: 0;
       }

       body {
        background-color: bisque;
       }

       .container {
        width: 300px;
        height: 300px;
        background-color: green;
        margin: auto;
        margin-top: 50px;
        display: flex;
        /* 水平居中 */
        justify-content: center;
            /* 垂直居中 */
        align-items: center;
       }

       .box {
        width: 200px;
        height: 100px;
        background-color: aquamarine;
       }
    </style>

    <div class="container">
        <div class="box"></div>
    </div>