关于css水平垂直居中的总结

[hawx1993]

关于flex

关于flex：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
flex 是2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。dispaly:flex也是实际的版本

display: box;/*最早09年草案*/
display: -webkit-box;    /* Safari */
display: -webkit-flex;    /* Chrome, WebKit */
display: flex;/*12年第五次草案  Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

flex水平居中和垂直居中

flex + justify-content + align-items
只需设置父节点属性，无需设置子元素

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /*垂直居中*/
  }
</style>

只设置 justify-content: center未设置align-items: center子元素高度将被拉伸至与父元素高度一致

缺点：有兼容性问题

table水平垂直居中

inline-block + text-align + table-cell + vertical-align

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    text-align: center;//水平居中
    display: table-cell;
    vertical-align: middle;//垂直居中
  }
  .child {
    display: inline-block;//防止块级元素宽度独占一行，内联元素可不设置
  }
</style>

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

absolute+transform 水平垂直居中

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

relative+absolute + negative margin

.parent{
    position:relative;
}
.child{
     width: 100px;
     height: 100px;
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -50px 0 0 -50px;
}

缺点：需设置子元素宽高

绝对定位方式+四个方向置0

子元素可以是块级元素也可以是行内元素，没有影响

.parent{
    position:relative
}
.child{
    margin:auto;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

需设置子元素宽高，否则子元素将与父元素宽高一致

line-height+text-align文本水平垂直居中

<div class="parent">
    <div class="child">Demo</div>
</div>
.child{
    text-align: center;
    width: 100px;
    height: 100px;
    line-height: 100px;
    /*display: inline-block;*/内联元素设置
}

子元素未知宽高的水平垂直居中

通过使用 box-align and box-pack 属性，居中 div 框的子元素：

.parent{
    position: relative;
    top: 0; left: 0; right: 0; bottom: 0;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
}
.child{
    -webkit-box-flex: 0;
}

缺点：IE 不支持 box-pack 和 box-align 属性。

或者也可以使用上面提到的 flex水平居中和垂直居中

水平居中

• 对于行内元素(inline)：text-align: center;
• 对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto
• 对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;；或者使用 flex 布局

垂直居中

对于行内元素(inline)

• 单行：设置上下 pandding 相等；或者设置 line-height 和 height 相等
• 多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用伪元素

对于块级元素(block)：下面前两种方案，父元素需使用相对布局

• 已知高度：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度
• 未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
• 使用 Flexbox：选择方向，justify-content: center;

[etheranl]

table水平垂直居中这里，是不是直接让

.child{
    margin:0 auto;
}

更好一点？
因为设置display:inline-block会导致参与垂直居中的是(child高度+line-height)，对child而言并不是准确的垂直居中。

[Pines-Cheng]

把 引用 >改为 标题 ## 视觉效果可能会好一些。

[Documen]

display：table-cell;
不行的

[yanhaijing]

楼主的方法还是不够全，看这里：https://github.com/yanhaijing/vertical-center

仅居中元素定宽高适用：

• absolute + 负margin
• absolute + margin auto
• absolute + calc

居中元素不定宽高适用：

• absolute + transform
• writing-mode
• lineheight
• table
• css-table
• flex
• grid