如何进行CSS垂直居中是开发中经常遇到的问题。
一般来说有如下的解决方案。
例如如下的html,需要将.box内部的img进行垂直居中。
<div class='box'> <img class='img' /> </div>
1. 使用inline-block布局,
.box { width: 200px; height: 200px; border: 1px solid black; text-align: center; } .box:before { content: ''; vertical-align: middle; height: 100%; display: inline-block; } .img { width: 50px; height: 50px; display: inline-block; vertical-align: middle; }
需要在页面上加入:before伪元素, 以及将内部的元素调整成inline-block。只要对这两个属性支持的浏览器都可以支持。
2. 可以使用absulote布局进行定位, 利用margin消除子元素高度和宽度的影响。
.box { width: 200px; height: 200px; border: 1px solid black; position: relative; } .img { position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -25px; width: 50px; height: 50px; }
需要将父节点改成relative布局, 而且子节点需要定高定宽。
3. 类似的,也可以使用relative进行布局,需要注意的是,内部的img需要标注成display: block。经过实测,firefox对img的默认display为inline。
.box { width: 200px; height: 200px; border: 1px solid black; } .img { position: relative; left: 50%; top: 50%; margin: -25px 0 0 -25px; background-color: green; width: 50px; height: 50px; display: block; }
同样的缺点是,需要内部元素定高定宽。
4. 可以使用transform来进行定位。
.box { width: 200px; height: 200px; border: 1px solid black; } .img { display: block; height: 50px; margin: 50% 0 0 50%; transform: translate(-50%, -50%); width: 50px; }
唯一的缺点是需要对transform的支持。 IE对此属性的支持是IE9.
5. 使用flex布局
使用flex-flow: row; align-items: center将其竖直居中。使用margin令其水平居中。
.box { width: 200px; height: 200px; border: 1px solid black; display: flex; flex-flow: row; align-items: center; } .img { height: 50px; width: 50px; margin: 0 auto; }
也可以简单的使用margin: auto.
.box { width: 200px; height: 200px; border: 1px solid black; display: flex; } .img { height: 50px; width: 50px; margin: auto; }
需要对display: flex的支持。