一 水平居中
1 行内元素水平居中
行内元素一般是文本,图标等,text-align可以控制其相对于父元素水平居中对齐
#parent{text-align: center;}
2 margin 自动水平居中
单个块级元素,可以使用margin auto可自动左右对齐,不过要首先设定宽度
#son{width: 100px; /*必须定宽*/margin: 0 auto;}
另外还可以通过设置父子宽度,使用具体的margin绝对定位对齐
3 块级改行内块级水平居中
多个块级元素时,父元素使用text-align居中对齐,子元素使用inline-block改为行内块级元素即可
#parent{text-align: center;}.son{display: inline-block; /*改为行内或者行内块级形式,以达到text-align对其生效*/}
4 flex布局水平居中对齐
flex布局中主轴为横轴,交叉轴为数轴,在父元素调整子元素沿主轴居中对齐,即可让子元素水平居中对齐
#parent{display: flex;justify-content: center;}
二 垂直居中
1 line-height垂直居中
可以通过设置height和line-height一致,使元素垂直居中对齐。height为该元素自身的高度,比如div img等的元素高度;line-height为行高的意思,绝定了元素中文本内容的高度。
line-height 可以通过百分比设置行高,以下为默认和70% 200%的效果。
height>line-height时,元素会偏向上,
height<line-height时,元素会偏向下,
height = line-height时,正好垂直居中。
#parent{height: 150px;line-height: 150px; /*与height等值*/}
可用于单行元素和多行元素
2 vertical-align垂直居中
针对行内元素和图片,进行垂直居中
#son{vertical-align: middle;}
3 flex垂直居中
3.1 父元素设置flex,使用align-items让子元素沿交叉轴对齐,即垂直居中
#parent{display: flex;align-items: center;}
3.2 子元素调整自己的位置,垂直居中对齐
#parent{display: flex;}#son{align-self: center;}
3.3 margin auto的方法在flex布局平方自动平分剩余空间,达到垂直居中的效果
#parent{display: flex;}#son{margin: auto 0;}
三 水平垂直居中
1 最好用最容易理解功能最强的还是flex布局
#parent{display: flex;}#son{margin: auto;}或#parent{display: flex;justify-content: center; //水平居中,沿主轴方向,主轴横向align-items: center; //垂直居中,沿垂直主轴方向}或#parent{display: flex;justify-content: center;}#son{align-self: center;}
2 父相子绝
.far{position: relative; //父元素允许相对定位}
子元素有三种写法:
2.1 要知道子元素宽高,利用宽高一半偏移
.box{width: 100px;height: 50px;position: absolute;}
2.2 不知道子元素宽高元素,transform偏移,但注意会影响其他元素的fixed定位等问题
.box{position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
2.2 不知道子元素宽高元素,margin:auto
.box{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}