兼容IE8的垂直居中

子元素不定宽高

1. 利用伪元素 inline-block & vertical-align, 该方法兼容ie8 (ie8仿真)

该方法的居中子元素display属性为inline-block

<div class="wrap">
    <div class="content">
      
    </div>
</div>

.wrap {
    text-align: center;
    width: 100%;
    height: 100px;
    background: #ccc;
}
.wrap:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.wrap .content {
    display: inline-block;
    vertical-align: middle;
}

2. 通过writing-mode属性改变水平流为垂直流

居中子元素display属性为inline-block （text-align作用于内联元素）

<div class="center-box">
    <div class="center-wrap">
      <div class="center-content">
          你想要上下左右居中的内容(元素,文本或其任意组合)
      </div>
    </div>
</div>

.center-box{
    width: 200px;
    height: 200px;
    border: 1px solid #333;
    writing-mode: tb-lr;
    writing-mode: vertical-lr;
    text-align: center;
}
.center-wrap{ 
    writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    text-align: center;
    width: 100%;
    display: inline-block;
}
.center-content{
    display: inline-block;
    text-align: left;
    text-align: initial;
}

居中子元素的display属性为block，设置margin: auto 0;

<div class="center-box">
    <div class="center-wrap">
        <ul class="center-content">
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
</div>

.center-box{
    width: 200px;
    height: 200px;
    border: 1px solid #333;
    writing-mode: tb-lr;
    writing-mode: vertical-lr;
    text-align: center;
}
.center-wrap{ 
    writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    margin: auto 0;
}

居中子元素定高

居中子元素通过absolute定位，该方法并不是常规的设置top为50%，然后再向上移动居中元素高度的一半，而是将top bottom 设置为0 ，再通过margin: auto定位

.content {
    height: 100px;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

参考：

《css世界》

https://github.com/liyongleihf2006/center-box

https://www.jianshu.com/p/71b4afe4f0a3

兼容IE8的垂直居中

猜你喜欢