css布局

左右布局:
左右布局一般使用浮动就可以。两个左浮或者一个左浮一个右浮,父级清除浮动;
左中右布局:
也可以采用浮动来实现,如果要自适应;可以采用浮动加定位来实现,如双飞翼布局;

水平居中:
内联元素:在父级加text-align:center;
块元素:在自身设置:margin:0 auto;
多个块元素:
1,子元素宽度固定,设置display: inline-block;父级设置text-align:center;
2,子元素宽度固定,设置margin:0 auto;
2,父级设置display: flex; justify-content: center;

垂直居中:
内联元素之单行文本:
1,在父级加line-height
2,在父级加padding:10px 0
3,在父级加line-height和padding:10px 0
内联元素之多行文本:
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;

你可能感兴趣的:(css布局)