CSS布局

CSS常见布局：

一.左右布局

（1）float方式：

将float设置成left，使用margin调节两个区域间距。

将左部分float：left，右边float：right，用margin调节两区域间距。

hint：要给父元素清除浮动：clearfix

.clearfix::after{

  content:"";

  display: block;

  clear: both;

}

（2）inline-block：

将左右部分display属性均设置为inline-block，然后左右区域即可在同一行显示。用margin调节间距。

（3）flex：

将父容器display设为flex，justify-content可以调节为：居中两侧、居中、开头对齐、末尾对齐等。

可用flex-basis来设置左右区域的具体宽度值，也可用flex-grow来设置左右区域占父容器空间的比值。

二.左中右布局（同上）

三.水平居中

内行元素的水平居中

给父元素设置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一致，父元素内的行内子元素会垂直居中。

（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布局的方法对行内元素或块级元素都适用

（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;