水平垂直居中包含两个初始条件:父元素为块级元素,高度宽度已设定好。
子元素为行内元素,单行
水平居中:将父元素设置为text-align:center
垂直居中:设置父元素line-height值与height值相同
或者将子元素设置为display:inline-block,按块级元素方法进行水平垂直居中。
子元素为多行文本
设置为inline-block
子元素为图片
垂直居中:父元素用行高替代高度,字体大小设置为0,
子元素设置vertical-align:middle
子元素为块级元素,宽、高度未设定
水平居中:块级子元素宽度会与父元素相同
行内块级元素:利用浮动的包裹性和百分比相对定位
为子元素外面再加上一层div,
将其设置为:float:left
position:relative
left:50%
将子元素设置为:position:relative
left:-50%
垂直居中:a.父元素设置display:table-cell
vertial-align:middle
b.父元素设置display:flex
align-items:center
子元素为块级元素,宽、高已设定
水平居中:a.子元素设置:margin:0 auto
b.计算父元素的padding值设置居中
c.计算子元素的margin值设置居中
d.绝对定位
父元素:position:relative
子元素:position:absolute
left:50%
然后调整子元素回退一半宽度即可:
a.margin-left:-50%
b.transform:translateX(-50%);
e.flex布局
父元素设置display:flex
justify-content:center
垂直居中:
a.计算父元素的padding值设置居中
b.计算子元素的margin值设置居中
c.绝对定位
父元素:position:relative
子元素:position:absolute
left:50%
然后调整子元素回退一半宽度即可:
a.margin-left:-50%
b.transform:translateX(-50%);
d.flex布局
父元素设置display:flex
align-items:center
e.父元素设置display:table-cell
vertial-align:middle