垂直居中的几种方式

多行垂直居中

display:flex

1、子元素有固定宽度

// css
body{
  display: flex;
  background-color: #333;

}
    #test{
      width: 500px;
      height: 500px;
      border: 1px solid yellow;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .inner{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }


  <div id="test">
    <div class="inner">
    </div>
  </div>

上面对外面的元素使用flex 可以使得内部的元素垂直居中，另外一个方法，通过对内部的元素设置 align-self: center; 达到一样的效果

  #test{
      width: 500px;
      height: 500px;
      border: 1px solid yellow;
      display: flex;
      justify-content: center;
      /* align-items: center; */
    }
    .inner{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      align-self: center;
    }

2、子元素多行不固定宽高，使内部元素水平垂直居中

  <div id="test">
    <div class="inner">
      <h1>登陆</h1>
      <input type="text"><br>
      <input type="password"><br>
      <button>确定</button>
    </div>
  </div>

#test{
  width: 500px;
  height: 500px;
  border: 1px solid yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner{
  /* width: 100px;
  height: 100px;
  border: 1px solid red; */
  /* align-self: center; */
  display: flex;
flex-direction: column;        /*元素的排列方向为垂直*/
justify-content: center;    /*水平居中对齐*/
 align-items: center;        /*垂直居中对齐*/
}

1648698-20190603191123012-217327831.png

补充下flex：
flex属性默认是0 1 auto
flex-grow为0，则存在剩余空间也不放大
flex-shrink为1，则空间不足该项目缩小
flex-basis为auto，则该项目本来的大小

WechatIMG572.png

flex:1相当于
flex-grow为1
flex-shrink为1
flex-basis为0%

WechatIMG573.png

item-1为 flex: 1 1 100px;
item-2为 flex: 1 1 200px;

WechatIMG574.png 容器上的属性.png 项目上的属性.png

display: -webkit-box;

display:flex和display:box都可用于弹性布局实现水平垂直居中，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名

  <div id="test">
    <div class="inner">
      <h1>登陆</h1>
      <input type="text"><br>
      <input type="password"><br>
      <button>确定</button>
    </div>
  </div>

#test{
  width: 500px;
  height: 500px;
  border: 1px solid yellow;
 display: -webkit-box;
-webkit-box-align: center;
 -webkit-box-pack: center;
}
.inner{
  /* width: 100px;
  height: 100px; */
  border: 1px solid red;
}

绝对定位 和负边距

负边距 针对 已知宽高

 <div class="box"><p>A</p></div>

<style>
        .box{
               width: 150px;
               height: 150px;
               background:blue;
               position: relative;
        }
        p{
               width: 50px;
               height: 50px;
               background:red;
               position: absolute;
               left:50%;
               top:50%;
               margin-left:-25px;
               margin-top: -25px;
               display: flex;
               align-items: center;
               justify-content: center;
        }
    </style>

1648698-20190603192400687-553639488.png

使用transform:translate定位

内部元素不知宽高的情况下

  <div id="test">
    <div class="inner">
      <h1>登陆</h1>
      <input type="text"><br>
      <input type="password"><br>
      <button>确定</button>
    </div>
  </div>

#test{
  width: 500px;
  height: 500px;
  border: 1px solid yellow;
 position: relative;
}
.inner{
  /* width: 100px;
  height: 100px; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid red;
}

绝对定位 和0

如果不限制宽高，只限制绝对定位为0，内部元素和外部元元素同样大小，不会居中，同时要加上 margin: auto;
这种方法跟上面的有些类似，但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中，很神奇吧。不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。

这种方式也要求居中元素的宽高必须固定，

#test{
  width: 500px;
  height: 500px;
  border: 1px solid yellow;
 position: relative;
}
.inner{
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 1px solid red;
    overflow: hidden;
    margin: auto;   
    /* margin: auto;    必须加 */
}

absolute + calc

这种方式也要求居中元素的宽高必须固定，所以我们为box增加size类

<div class="wp">
    <div class="box size">123123</div>
</div>

.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
 position: relative;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}

.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

通过display:table-cell

给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中

#test{
  width: 500px;
  height: 500px;
  border: 1px solid yellow;
  background:blue;
  position: relative;
  text-align: center;
  display: table;

}
.inner{
    width: 50%;
    height: 50%;
    background-color: red;
    display: table-cell;
    vertical-align: middle;
}

display:inline-block;

通过:after来占位。

#test{
  text-align:center; 
  font-size:0;
  border: 1px solid red;
  background-color: red;
  width: 500px;
  height: 500px;
}
#test span{
  vertical-align:middle; 
  display:inline-block; 
  font-size:16px;
}
#test:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

---

总结：
仅居中元素定宽高使用：

• absolute + 负margin
• absolute + margin auto
• absolute + calc
  居中元素不定宽高：
• absolute + transform
• lineheight
• writing-mode
• table
• css-table
• flex

PC端有兼容性要求，宽高固定，推荐absolute + 负margin
PC端有兼容要求，宽高不固定，推荐css-table
PC端无兼容性要求，推荐flex
移动端推荐使用flex

---

补充：
这里补充下 flex 的属性（设置在容器上）：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content
  设置在项目上的属性：
• order ： 定义项目的排列顺序，值越小越靠前；
• flex-grow： 定义项目的放大比例，，默认0；如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
  浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
• align-self