| HTML, CSS, 居中

常见的将元素水平垂直居中的方法

其实将元素水平垂直居中是我们在日常学习和工作中常常见到的，而且有时候面试也会常考的，所以今天特此花点时间来总结一下常用的一些用法。

  1. 方法一：容器内元素为display:block，而且元素的宽和高是已知的；

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
        .container{
            position: relative;
            height: 300px;
            width: 300px;
            background: bisque;
        }
        .box{   /*元素是block，并且宽和高是已知的*/
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px; 
            height: 100px;
            width: 100px;
            background: red;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box"></div>
        </div>
    </body>
    </html>

    得到的结果如下所示：
    方法一的居中结果图

  2. 方法二：容器内元素为display:block，而且元素的宽和高是未知的；

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        *{
    		margin: 0;
    		padding: 0;
    	}
        .container{
            position: relative;
            height: 300px;
            width: 300px;
            background: bisque;
        }
        .box{   /*元素是block，并且宽和高是未知的*/
            position: absolute;
            top: 50%;
            left: 50%;
            background: red;
            transform: translateX(-50%) translateY(-50%);
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box">我是内容content我是内容content我是内容content</div>
        </div>
    </body>
    </html>

    得到的结果如下所示：
    方法二得到的结果

  3. 方法三：flex布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        *{
    		margin: 0;
    		padding: 0;
    	}
        .container{  /*给父级设置flex*/ 
           display: flex;
           justify-content: center; /*水平居中*/
           align-items: center; /*垂直居中*/
           height: 300px;
           width: 300px;
           background: bisque;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box">我是内容content</div>
        </div>
    </body>
    </html>

    得到的结果如下所示：
    方法三的居中结果图

  4. 方法四：容器内元素为display:inline/inline-block;即行内元素的水平居中;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        *{
    		margin: 0;
    		padding: 0;
    	}
        .container{
           height: 300px;
           width: 300px;
           background: bisque;
           text-align: center;  /*水平居中*/
           line-height: 300px;   /*将line-height和height的值设置为相同的，即可达到垂直居中 */
        }
        .box{  /*将块元素设置为行级块元素*/
            display: inline-block;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box">我是内容content</div>
        </div>
    </body>
    </html>

    得到的结果如下所示：
    方法四的居中结果图

  5. 方法五：margin:auto;来实现居中的绝对定位；

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        *{
    		margin: 0;
    		padding: 0;
    	}
        .container{
            position: relative;
           height: 300px;
           width: 300px;
           background: bisque;
        }
        .box{
            position: absolute; 
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            height: 100px;
            width: 100px;
            background: red;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box"></div>
        </div>
    </body>
    </html>

    得到的结果如下所示：
    方法五的居中结果图

以上就是我总结的五种居中方式，在这里我们需要考虑的一点就是兼容性的一些问题，虽然CSS3的transform和flex固然好用，但在项目的实际运用中必须考虑兼容问题。在学习和开发中选择适合自己的方式来进行居中即可。