CSS常見布局：

一.左右布局

（1）float方式：

將float設置成left，使用margin調(diào)節(jié)兩個區(qū)域間距。

將左部分float：left，右邊f(xié)loat：right，用margin調(diào)節(jié)兩區(qū)域間距。

hint：要給父元素清除浮動：clearfix

.clearfix::after{

? content:"";

? display: block;

? clear: both;

}

（2）inline-block：

將左右部分display屬性均設置為inline-block，然后左右區(qū)域即可在同一行顯示。用margin調(diào)節(jié)間距。

（3）flex：

將父容器display設為flex，justify-content可以調(diào)節(jié)為：居中兩側、居中、開頭對齊、末尾對齊等。

可用flex-basis來設置左右區(qū)域的具體寬度值，也可用flex-grow來設置左右區(qū)域占父容器空間的比值。

二.左中右布局（同上）

三.水平居中

內(nèi)行元素的水平居中

給父元素設置text-align：center

給父元素設置display：flex；justify-content：center；

塊級元素的水平居中

元素寬度確定，給元素設置margin：0 auto；

寬度不確定時：

父級元素設置display:flex;justify-content:center;

父級元素設置display:flex; 子元素設置margin：0 auto；

父級元素設置display:grid;justify-content:center;

父級元素設置display:grid; 子元素設置margin：0 auto；

垂直居中

inline元素的垂直居中

（1）設置父元素的高度height與行高line-height一致，父元素內(nèi)的行內(nèi)子元素會垂直居中。

（2）給父元素設置display:flex;flex-direction:column;justify-content:center;

（3）給父元素設置display:flex;align-items:center;

（4）給父元素設置display:flex;子元素設置margin:auto 0;

（5）給父元素設置display:grid;align-content:center;

（6）給父元素設置display:grid;子元素設置margin:auto 0;

塊級元素的垂直居中

flex布局和grid布局的方法對行內(nèi)元素或塊級元素都適用

（1）給父元素設置display:flex;flex-direction:column;justify-content:center;

（2）給父元素設置display:flex;align-items:center;

（3）給父元素設置display:flex;子元素設置margin:auto 0;

（4）給父元素設置display:grid;align-content:center;

（5）給父元素設置display:grid;子元素設置margin:auto 0;

元素高度確定時：

（1）父元素position：relative，子元素position：absolute； top：50%； margin-top：元素高度/2；

（2）子元素設置相對定位，子元素top：50%；margin-top：-元素高度/2；

.father:before,.father:after{

content:'';

display:block;

height:(父元素高度-子元素高度)/2;

}

元素高度不確定時，

（1）父元素設置相對定位，子元素設置絕對定位，子元素top:50%;translateY(-50%)/translate(0,-50%)

（2）子元素設置相對定位，子元素top:50%;translateY(-50%)/translate(0,-50%)

水平垂直居中通用

給父元素設置display:flex;justify-content:center;align-items:center;

（1）給父元素設置display:flex;給子元素設置margin:auto;

（2）給父元素設置display:grid;justify-content:center;align-content:center;

（3）給父元素設置display:grid;給子元素設置margin:auto;