CSS 实现：文字水平垂直居中 - Ruth92

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

☊ 【实现要求】：

<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; //垂直居中
}