左右布局:
左右布局一般使用浮動就可以微服。兩個左浮或者一個左浮一個右浮,父級清除浮動冒晰;
左中右布局:
也可以采用浮動來實現(xiàn)惜颇,如果要自適應(yīng);可以采用浮動加定位來實現(xiàn)妇蛀,如雙飛翼布局耕突;
水平居中:
內(nèi)聯(lián)元素:在父級加text-align:center;
塊元素:在自身設(shè)置:margin:0 auto;
多個塊元素:
1笤成,子元素寬度固定,設(shè)置display: inline-block;父級設(shè)置text-align:center;
2眷茁,子元素寬度固定炕泳,設(shè)置margin:0 auto;
2,父級設(shè)置display: flex; justify-content: center;
垂直居中:
內(nèi)聯(lián)元素之單行文本:
1上祈,在父級加line-height
2培遵,在父級加padding:10px 0
3,在父級加line-height和padding:10px 0
內(nèi)聯(lián)元素之多行文本:
1, 父級加display: table-cell;
height;
vertical-align: middle;
2,父級加display: flex;
align-items:center;
塊級元素:
1登刺,在父級加padding:10px 0;
2籽腕,父級加position:relative;
垂直元素加position:absolute;
top:50%;
height:100px;
margin-top:-50px
3,不固定高度的情況下:
父級加position:relative;
垂直元素加position:absolute;
top:50%;
transform:translateY(-50%)
4纸俭,display: flex;
justify-content: center;
align-items:center;