CSS 实现:文字水平垂直居中

☊ 【实现要求】:

demo1

<div class="demo1">
    标题1111
</div>

√ 【实现】:

方案一:普通布局

.demo1 {
    text-align: center;	//水平居中
    line-height: $height; //垂直居中
}

方案二flex 布局

.demo1 {
    display: flex;
    display: -webkit-flex;
    justify-content: center; //水平居中
    align-items: center; //垂直居中
}

方案三box 布局(2009年语法,flex 的前身)

.demo1 {
    display: box;
    display: -webkit-box;
    -webkit-box-pack:center; //水平居中
    -webkit-box-align:center; //垂直居中
}

Scoop It and Enjoy the Ride!
原文地址:https://www.cnblogs.com/Ruth92/p/5462660.html