如果要實(shí)現(xiàn)水平居中，嚴(yán)格來說滿足以下條件才能稱為水平居中：①父元素必須是塊級(jí)盒子容器②父元素寬度必須已經(jīng)被設(shè)定好
假設(shè)有以下場(chǎng)景，子元素是塊級(jí)元素，但是沒有設(shè)置寬度，那么就會(huì)充滿整個(gè)父元素；
子元素是行內(nèi)元素，寬度由自身內(nèi)容撐開； 可以設(shè)置text-align實(shí)現(xiàn)；
最常見的是 子元素是塊元素，寬度已經(jīng)確定：①：margin:0 auto
②通過計(jì)算 設(shè)置父元素的padding為子元素寬高的一半 （此處可以設(shè)置box-sizing:boeder-box(元素寬高為content，默認(rèn)是width+padding+margin)）；也可以設(shè)置子元素margin
③絕對(duì)定位
垂直居中
同樣的，父元素是塊級(jí)元素，有高度
?
假設(shè)以下場(chǎng)景，①子元素行內(nèi)，高度是內(nèi)容撐開，可以設(shè)置父元素 line-height為子元素高度
②子元素是塊級(jí)元素，但是沒有設(shè)置高度（無法設(shè)置margin，padding），但是可以給父元素設(shè)定 display:table-cell;vertical-align:middle; flex方法也可以（父元素 flex ; flex-drection;justify- content:center）
③子元素是塊級(jí)元素高度確定，可以設(shè)置子元素margin，父元素padding
絕對(duì)定位
水平垂直居中
?
- flex
父元素設(shè)置display：flex;justify-content:center;align-items:center;- 示例
<iframe height='265' scrolling='no' title='jLbmzQ' src='//codepen.io/longtean/embed/jLbmzQ/?height=265&theme-id=0&default-tab=css&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a >jLbmzQ</a> by LongTean (<a >@longtean</a>) on <a >CodePen</a>.
</iframe>
?
?
- 示例
- absolute
?
<iframe height='265' scrolling='no' title='jLbmzQ' src='//codepen.io/longtean/embed/jLbmzQ/?height=265&theme-id=0&default-tab=css&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a >jLbmzQ</a> by LongTean (<a >@longtean</a>) on <a >CodePen</a>.
</iframe>
? - margin:auto
父元素設(shè)置relative 子元素 絕對(duì)定位 ；margin：auto； left：0；top:0;right:0;bottom:0; - 負(fù)margin法
絕對(duì)定位top和left50%；然后設(shè)置負(fù)向margin“補(bǔ)償”回一半 （其實(shí)也可以設(shè)置成其他百分比，因?yàn)闉g覽器對(duì)盒子模型解析不同，都需要使用ｍａｒｇｉｎ來調(diào)節(jié)）
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 180px;
height: 210px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -90px; /*height的一半*/
margin-left: -105px; /*width的一半*/
}
?
- table-cell法
父級(jí)元素 dispaly:table-cell;vertical-align:middle;text-align:center;
子元素必須是行內(nèi)元素 設(shè)置 vertical-align：middle;
總結(jié)flex布局
flex布局的核心概念是`容器`和`軸` ，分別是父容器和子容器，主軸和交叉軸，（可以使用）
- 容器
- 特點(diǎn)：容器具有這樣的特點(diǎn)：父容器可以統(tǒng)一設(shè)置子容器的排列方式，子容器也可以單獨(dú)設(shè)置自身的排列方式，如果兩者同時(shí)設(shè)置，以子容器的設(shè)置為準(zhǔn)
- 常用屬性：
- 父容器：
- ①justify-content: 用來設(shè)置子容器如何沿著主軸排列 flex-start | flex-end | center | space-between | 起始端對(duì)齊|居中端對(duì)齊|末尾端對(duì)齊 | 均勻分布
- ②align-items: 用來設(shè)置子容器如何沿著交叉軸分配紙容器之間的距離 flex-start | flex-end | center | baseline | stretch | 沿基線對(duì)齊 | 尺寸拉伸與父元素一直
- 父容器：
- 子容器：
- ①flex 如何在主軸上伸縮 單值 | 兩個(gè)值 | 三個(gè)值 | none
- 寬/高 ：10em . 30px auto content
- 無單位 ： 1 2
- 1 30px
- 2 2
- 1 1 10%
- ②align-self; 設(shè)置子容器沿交叉軸分布 可選屬性同父容器align-items 以子容器設(shè)置為主
- ①flex 如何在主軸上伸縮 單值 | 兩個(gè)值 | 三個(gè)值 | none
- 軸：
* flex-direction: 決定主軸方向 主軸交叉軸垂直 - 其他屬性
- 父容器
- flex-wrap :決定子容器是否換行排列：nowrap | wrap | wrap-reverse | 不換行 | 換行 | 反向換行
- align-content : 設(shè)置多行子容器之間的對(duì)齊方式 方式同 align-items
- 子容器
- flex-basis : 在不伸縮情況下子容器的原始尺寸 主軸橫代表寬度 縱向 代表高度
- flex-grow : 子容器彈性伸縮的比例
- order : 順序
- 父容器
