CSS实现元素垂直居中

CSS实现元素垂直居中

text-align只对文本或子元素display：inline或者inline-block有效，vertical-align只能定义在display：为inline或者inline-block的元素（table-cell也算是inline-block）。对于display：inline元素，设置padding和margin的top和bottom无效，左右有效，border都有效。

 <div class="nav">
     <div class="zhangjinxi2"><span>222222222222222</span></div>
 </div>

容器display为inline或者inline-block

这种一般都是对文字的居中对齐，水平方向上text-aligin：center，垂直方向上，vertical-align:middle或者使line-height === height,

容器和子元素都为block或者inline-block

父子宽高都固定

• 利用盒模型的margin（子元素）和padding（父元素）实现，
• 利用position定位的left和top实现。
• 也可以通过将容器设为display：inline，子容器display：inline-block的方式，这样父元素就可以使用text-align和vertical-align了

父子至少有一个不固定

• 利用flex，这个是最简单的方式了

<style lang="less">
.nav {
    background: blue;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

• 利用grid布局

.nav {
    background: blue;
    display: grid;
    .zhangjinxi2 {
        background: red;
        align-self: center;
        justify-self: center;
    }
}

• 利用position+transform定位

<style lang="less">
.nav {
    background: blue;
    position: relative;
    .zhangjinxi2 {
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>

• 利用position+margin:auto定位

<style lang="less">
.nav {
    background: blue;
    position: relative;
    .zhangjinxi2 {
        background: red;
        position: absolute;
        top: 0;
        left: 0;
        right:0;
        bottom:0;
        margin:auto;
    }
}
</style>