原文

第一种方法

  • 利用弹性布局实现，在父容器中添加display: flex;align-items: center;
  • 首先解释一下flex布局，Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
  • 采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。
  • 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

  • 浏览器的支持如下：
    八种垂直水平居中 - 图1
    代码附上：

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8" />
    5.       <title></title>
    6.       <style>
    7.           .out{
    8.               width: 500px;
    9.               height: 500px;
    10.               background-color: skyblue;
    11.               display: flex;
    12.               align-items: center;/*垂直居中*/
    13.               /*justify-content: center;*//*水平居中*/
    15.           }
    16.           .in{
    17.               width: 100px;
    18.               height: 100px;
    19.               background-color: salmon;
    20.           }
    21.       </style>
    22.   </head>
    23.   <body>
    24.       <div class="out">
    25.           <div class="in"></div>
    26.       </div>
    27.   </body>
    28. </html>

    效果图：
    八种垂直水平居中 - 图2

    第二种方法

    设置父元素相对定位，子元素position: absolute;top: 50%;同时margin-top值为-(子元素高度的一半)，因为设置top值时是相对于盒子顶部，所以想要居中还要往上移动半个盒子的高度才能实现。IE版本都可以兼容，代码如下：

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8" />
    5.       <title></title>
    6.       <style>
    7.           .out{
    8.               width: 500px;
    9.               height: 500px;
    10.               background-color: skyblue;    
    11.               position: relative;            
    12.           }
    13.           .in{
    14.               width: 100px;
    15.               height: 100px;
    16.               background-color: salmon;
    17.               position: absolute;
    18.               top: 50%;
    19.               margin-top: -50px;
    20.           }
    21.       </style>
    22.   </head>
    23.   <body>
    24.       <div class="out">
    25.           <div class="in"></div>
    26.       </div>
    27.   </body>
    28. </html>

    效果图：
    八种垂直水平居中 - 图3

    第三种方法

    和上一种方法原理差不多，都是利用相对定位和绝对定位，有点不同是子元素内加上了transform: translateY(-50%);和margin-top: -50px;作用差不多，话不多说，上代码：

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8" />
    5.       <title></title>
    6.       <style>
    7.           .out{
    8.               width: 500px;
    9.               height: 500px;
    10.               background-color: skyblue;
    11.               position: relative;
    12.           }
    13.           .in{
    14.               width: 100px;
    15.               height: 100px;
    16.               background-color: salmon;
    17.               position: absolute;
    18.               top: 50%;
    19.               transform: translateY(-50%);
    20.           }
    21.       </style>
    22.   </head>
    23.   <body>
    24.       <div class="out">
    25.           <div class="in"></div>
    26.       </div>
    27.   </body>
    28. </html>

    上图：
    八种垂直水平居中 - 图4

    第四种方法

    这种方法和上一种相似，这是利用相对定位，在子元素中设置position: relative;top: 50%;transform: translateY(-50%);先相对自身向下平移父元素的50%，再。。。你们懂的。
    代码：

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8" />
    5.       <title></title>
    6.       <style>
    7.           .out{
    8.               width: 500px;
    9.               height: 500px;
    10.               background-color: skyblue;
    11.           }
    12.           .in{
    13.               width: 100px;
    14.               height: 100px;
    15.               background-color: salmon;
    16.               position: relative;
    17.               top: 50%;
    18.               transform: translateY(-50%);
    19.           }
    20.       </style>
    21.   </head>
    22.   <body>
    23.       <div class="out">
    24.           <div class="in"></div>
    25.       </div>
    26.   </body>
    27. </html>

    图：（虽然这些图都是一毛一样。。。）
    八种垂直水平居中 - 图5

    第五种方法

  • 这种方法和第一种差不多，在父容器中设置display:flex;子元素设置align-self: center;

  • align-self属性：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

  • 效果图：
    八种垂直水平居中 - 图6

    第六种方法

    这是一种障眼法，在父容器中再加上一个子元素，把它的高度设为去掉盒子高度后的一半，实际上就是设置了一个隐藏块元素，把实际上显示的块元素“挤”到垂直居中的位置。看代码：

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8" />
    5.       <title></title>
    6.       <style>
    7.           .out{
    8.               width: 500px;
    9.               height: 500px;
    10.               background-color: skyblue;
    11.           }
    12.           .in{
    13.               width: 100px;
    14.               height: 100px;
    15.               background-color: salmon;
    16.           }
    17.           .hide{
    18.               height: 200px;/*(500-100)/2=200*/
    19.           }
    20.       </style>
    21.   </head>
    22.   <body>
    23.       <div class="out">
    24.           <div class="hide"></div>
    25.           <div class="in"></div>
    26.       </div>
    27.   </body>
    28. </html>

    还是看图吧：
    八种垂直水平居中 - 图7

    第七种方法

    设置父元素为相对定位，子元素为绝对定位，同时设置子元素的top,bottom,left,right值为0，最后设置margin:auto;这能实现块元素的垂直+水平居中，看代码：

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8" />
    5.       <title></title>
    6.       <style>
    7.           .out{
    8.               width: 500px;
    9.               height: 500px;
    10.               background-color: skyblue;
    11.               position: relative;
    12.           }
    13.           .in{
    14.               width: 100px;
    15.               height: 100px;
    16.               background-color: salmon;
    17.               position: absolute;
    18.               top: 0;
    19.               bottom: 0;
    20.               left: 0;
    21.               right: 0;
    22.               margin: auto;
    23.           }
    25.       </style>
    26.   </head>
    27.   <body>
    28.       <div class="out">
    29.           <div class="in"></div>
    30.       </div>
    31.   </body>
    32. </html>

    看图：
    八种垂直水平居中 - 图8
    如果只实现垂直居中，则只设置top,bottom值为0，看代码：

    1. .in{
    2.               width: 100px;
    3.               height: 100px;
    4.               background-color: salmon;
    5.               position: absolute;
    6.               top: 0;
    7.               bottom: 0;
    8.               margin: auto;
    9.           }

    如果要实现水平居中当然是只设置right,left为0就好啦。

    第八种方法

    设置父容器为display: table-cell;vertical-align: middle;注意：不能将display:inline-block;替代display:table-cell;具体代码如下：

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8" />
    5.       <title></title>
    6.       <style>
    7.           .out{
    8.               width: 500px;
    9.               height: 500px;
    10.               background-color: skyblue;
    11.               display: table-cell;
    12.               vertical-align: middle;
    13.           }
    14.           .in{
    15.               width: 100px;
    16.               height: 100px;
    17.               background-color: salmon;
    18.           }
    20.       </style>
    21.   </head>
    22.   <body>
    23.       <div class="out">
    24.           <div class="in"></div>
    25.       </div>
    26.   </body>
    27. </html>

    注

  • 有些朋友可能会说可以设置line-height为父元素的高实现垂直居中，但是，划重点！！！ 这种方法只适用于子元素为单行文本的情况！！！ 记住不要搞错了。

  • 还有一个vertical-align: middle;这个适用于行内元素的垂直居中，块元素不可以。