首页 > 代码库 > css 常用的几种垂直居中(包括图片)

css 常用的几种垂直居中(包括图片)

我知道现在有非常多的水平垂直居中的写法,我就写一些我自己常用的方法,同时说明一下优缺点

<div class="wrapper">
    <div class="item"></div>
</div>

.wrapper{width:200px;height:200px;}
.item{width:100px;height:100px;}


1 `position  tranform
.wrapper{position:relative}
.item{position:absolute;top:50%;transform:translateY(-50%);}

优点:item不需要定死高度
缺点:transform需要兼容一下;不过现在transform兼容性还好

 

 

2 `position  margin
.wrapper{position:relative}
.item{position:absolute;top:50%;margin-top:-50px;}

优点:兼容性好,
缺点:item需要定死高度,因为margin-top需要反方向移动自身高度的一半

 

 

3 `position  margin
.wrapper{position:relative}
.item{position:absolute;top:0;bottom:0;margin:auto;}

优点:兼容性好,也不需要定高;

 

 

4 `display:inline-block ;line-height;vertical-align:middle;

.wrapper{line-height:200px;}
.item{display:inline-block;vertical-align:middle;}

优点:兼容性好,也不需要定高;需要将block变为inline-block
vertical-align:一般都用在子元素上;

 

 

5` flex   align-items    justify-content

.wrapper{display:flex;justify-content:center;aligin-items:center}

优点:全部写在父元素上,不定高,移动端高效;

 

 

6` flex   margin

.wrapper{display:flex;}
.item {margin:auto}

优点:不定高,移动端高效;

 

 

 

总结一下:我一般都是用第五或者第六种写法,现在flex布局的浏览器支持越来越广泛了,而且这样布局的话,有几个好处:

1 不需要考虑子元素的本身的height和width,容易复用,特别是写UI组件的时候

2 不需要顾及子元素本身是块状元素还是内联元素还是内联块状元素(例如图片),它都可以居中

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

 

css 常用的几种垂直居中(包括图片)