未知宽高元素垂直居中

flex方法

• html

<div class="parent">
    <div class="child">hello world</div>
</div>

• style
  • 给父元素添加 flex 属性
  • 设置主轴(默认横向)子元素居中的排列方式 justify-content: center;
  • 设置侧轴(默认纵向)子元素居中的排列方式 align-items: center;

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    width:500px;
    height:500px;
    background: rgb(33, 46, 228);
}
.parent .child {
    color:#fff;
}

• 缺点
  • 垂直居中是相对于已知父元素的宽高情况下进行居中
  • 浏览器兼容性比较差，只能兼容到IE9及以上；

2D transform方法

• html

<div class="parent">
    <div class="child">hello world</div>
</div>

• style
  • 父元素设置为 relateve
  • 子元素设置为 absolute
  • 子元素相对于父元素进行 上 左 各50%的偏移
  • 子元素的偏移是子元素顶部和左侧相对于父元素的偏移，需要用 translate 按照元素自身宽度 上 和 左 移动
  • PS : 除了 translate 以外，还可以使用margin设置负值的方式，但是需要对元素的大小进行计算

.parent{
    position: relative;
}
.parent .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color:rgb(33, 46, 228);
}

• 优点
  • 实现的是相对于当前屏幕的居中，并且不受其他元素影响
• 缺点
  • 脱离了文档流

table方法

• html

<div class="parent">
    <div class="child">hello world</div>
</div>

• style
  • 将父元素设置为 table
  • 将子元素设置为 table-cell
  • 设置子元素垂直居中 vertical-align: middle;
  • 设置子元素横向居中 text-align: center;

.parent{
    display: table;
    height:500px;
    width: 500px;
    background-color: rgb(33, 46, 228)
}
.parent .child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

• 优点
  • 父元素（parent）可以动态的改变高度（table元素的特性）
• 缺点
  • IE8以下不支持

inline-block方式

• html

<div class="parent">
    <!-- <span></span> -->
    <div class="child">hello world</div>
</div>

• style
  • 父级设置水平居中 text-align: center;
  • 子级设置 display: inline-block; 和 vertical-align: middle;
  • 子级的需要一个兄弟也为 inline-block，设置 vertical-align，基准线为中间，并且让他高度 height: 100%; ，实现垂直居中。
    • 一种方案是添加标签
    • 另一种方案是通过伪元素 ::after 或 ::before

.parent{
    height:300px;
    width: 300px;
    text-align: center;
    background: rgb(33, 46, 228);
}
/* 也可以给 */
.parent::before{
    content: "";
    display: inline-block;;
    height: 100%;
    vertical-align: middle;
    /* inline-block的兼容表达*/
    zoom: 1;/*BFC*/
    *display: inline;
}
.parent .child{
    display: inline-block;
    color: #fff;
    vertical-align: middle;
    /* inline-block的兼容表达*/
    zoom: 1;/*BFC*/
    *display: inline;
}

• 缺点
  • <span> 方式多了一个没用的空标签，伪元素方式IE9以下不兼容
  • IE6、IE7不识别 inline-block，实现兼容的方法：直接将块元素设置为 display:inline 呈现为内联对象，然后触发 layout (如 zoom:1 )

参考文献

• CSS垂直居中(视频)
• CSS未知宽高元素水平垂直居中