css 如何使文字垂直居中

https://css-tricks.com/center...
足夠你用了

vertical-align:middle

flex的垂直居中，沒有人來答一發(fā)么？

flex的垂直居中，這種做法可以不定義內(nèi)部元素的高度
css:

.mod{
    display: flex;
    align-items: center;/*垂直居中*/
    height:300px;
}
.inner{
}

html:

<div class="mod">
    <div class="inner">
        居中
    </div>
</div>

效果如下：

兩個(gè)方法

一、align-self / align-items

IE11 以下版本不支持。搜一下用法有案例，不寫了。

二、table-cell

  display:table-cell;
  vertical-align:middle;

單行文本，只需要將文本行高(line-height)和所在區(qū)域高度(height)設(shè)為一致即可：

<!--html代碼-->
    <div id="div1">
        這是單行文本垂直居中
    </div>

/*css代碼*/
#div1{
    width: 300px;
    height: 100px;
    margin: 50px auto;
    border: 1px solid red;
    line-height: 100px; /*設(shè)置line-height與父級(jí)元素的height相等*/
    text-align: center; /*設(shè)置文本水平居中*/
    overflow: hidden; /*防止內(nèi)容超出容器或者產(chǎn)生自動(dòng)換行*/
}

多行文本垂直居中分為兩種情況，一個(gè)是父級(jí)元素高度不固定，隨著內(nèi)容變化；另一個(gè)是父級(jí)元素高度固定。
父級(jí)高度不固定的時(shí)，高度只能通過內(nèi)部文本來?yè)伍_。這樣，我們可以通過設(shè)置內(nèi)填充（padding）的值來使文本看起來垂直居中，只需設(shè)置padding-top和padding-bottom的值相等：

<!--html代碼-->
    <div id="div1">
            這是多行文本垂直居中，
            這是多行文本垂直居中，
            這是多行文本垂直居中，
            這是多行文本垂直居中。
    </div>

/*css代碼*/
#div1{
    width: 300px;
    margin: 50px auto;
    border: 1px solid red;
    text-align: center; /*設(shè)置文本水平居中*/
    padding: 50px 20px;
}

父級(jí)高度固定的時(shí)，設(shè)置父級(jí)div的display屬性：display: table;；然后再添加一個(gè)div包含文本內(nèi)容，設(shè)置其display:table-cell;和vertical-align:middle

<!--html代碼-->
    <div id="outer">
        <div id="middle">
            這是固定高度多行文本垂直居中，
            這是固定高度多行文本垂直居中，
            這是固定高度多行文本垂直居中，
            這是固定高度多行文本垂直居中。
        </div>
    </div>

/*css代碼*/
       #outer{
            width: 400px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid red;
            display: table;
        }
       #middle{ 
            display:table-cell; 
            vertical-align:middle;  
            text-align: center; /*設(shè)置文本水平居中*/  
            width:100%;   
        }

推薦你看這篇文章
對(duì)css居中的一點(diǎn)總結(jié)

第一種:加上line-height和vertical-align:middle;line-height和height的值要一樣;
第二種:給元素設(shè)置一個(gè)字的寬度,再調(diào)一下邊距,字體會(huì)自動(dòng)往下排列;
第三種:給每個(gè)字后面加一個(gè),當(dāng)然這并不推薦

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

1、使用table-cell+vertical-align

.parent {
    display:table-cell;
    vertical-align:middle;
}

2、使用absolute+transform

.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

3、使用flex+align-items

.parent {
    position:flex;
    align-items:center;
}

//html
<div>
  <p>n行文字n行文字n行</p>
</div>


//css
div{
  height:100px;
  display:-webkit-box;
  -webkit-box-align:center;/* 垂直居中 */
  -webkit-box-pack:center;/* 水平居中 */
  background:#eee;
}