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

css 常用的几种垂直居中（包括图片）

2024-09-09 00:15:18   221人阅读

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

<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 常用的几种垂直居中（包括图片）


联系
我们