flex語法：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
基本的垂直水平居中
//css
.center-wrap{
display:flex;
align-items: center;
justify-content: center;
}
//html
<div class="center-wrap">
<div>this is the box which need be setted</div>
</div>
擴(kuò)展：
若多個(gè)元素需要進(jìn)行垂直居中，用以下方法可以減少DOM元素的使用：
多個(gè)元素相對于父元素垂直居中.png
//css
.box {
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid;
-webkit-justify-content: center;
justify-content: center; /* 此處是關(guān)鍵*/
-webkit-align-items: center;
align-items: center; /* 此處是關(guān)鍵*/
-webkit-flex-direction: column;
flex-direction: column; /* 此處是關(guān)鍵*/
}
.title {
font-size: 14px;
font-weight: normal;
}
.img {
width: 200px;
margin: 20px 0;
}
.btn {
width: 100px;
height: 28px;
color: #fc6537;
border-radius: 5px;
border: 1px solid #fc6537;
background-color: #fff;
}
//html
<div class="box">
<hl class="title">多個(gè)元素相對于父元素垂直居中</hl>
<button class="btn">click me</button>
</div>
