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>

效果如下：

兩個方法

一、align-self / align-items

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

二、table-cell

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

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

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

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

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

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

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

父級高度固定的時，設置父級div的display屬性：display: table;；然后再添加一個div包含文本內(nèi)容，設置其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; /*設置文本水平居中*/  
            width:100%;   
        }

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

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

<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;
}