跬步-CSS实现水平垂直居中

CSS实现居中,无论在实际开发和面试都是常见的内容。

本文总结了实现居中常见的几种方式,包含宽度已知/未知及兼容性的要求。

<style> .pn { width: 500px; height: 500px; border: 1px solid #000; } .box { background-color: #eee; } .size { width: 100px; height: 100px; } </style> <body> <div class="pn"> <div class="box size">啦啦啦</div> </div> </body>

这一段是公共内容,pn类是父容器,box类代表需要居中的元素,size类控制是否定义高度。

line-height

利用行内元素高度和行高相同的居中效果,此方法常用于单行文本的垂直居中效果。

 .pn { line-height: 500px; text-align: center; font-size: 0; } .box { font-size: 14px; display: inline-block; line-height: initial; text-align: left; }

 

absolute margin负值

父元素设置为定位元素,子元素的绝对定位是基于父元素的宽高,这个效果可以达到居中的目的。

由于定位的基点是基于子元素的左上角,需要根据元素自身的尺寸做对应的偏移纠正。

此方法是最常用的居中方式,兼容效果好,需要已知子元素的高度。

 .pn { position: relative; } .box { position: absolute; top: 50%; left:50%; margin-top: -50px; margin-left: -50px; }

absolute auto

该方法同样是基于定位实现,先将子元素的定位都设置为0,再将margin设置为auto就可以实现居中。

兼容效果好,需要已知子元素的高度。

 .pn { position: relative; } .box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

absolute calc

该方法同样是基于定位实现,利用calc特性直接计算定位的偏移位置。

需要兼容css3的calc特性,已知子元素的高度。

 .pn { position: relative; } .box { position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); }

absolute transform

该方法同样是基于定位实现,利用transform偏移自身的位置实现居中。

需要兼容css3的transform特性,不需要已知高度。

 .pn { position: relative; } .box { position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%) } 

 table

利用table元素天然垂直居中的特性实现居中效果。

使用table做布局背离了语义化的初衷,也会产生很多冗余的代码,不建议使用。

 .pn{ text-align: center; } .box{ display: inline-block; } <table> <tbody> <tr> <td class="pn"> <div class="box">啦啦啦</div> </td> </tr> </tbody> </table>

css-table

利用css的table属性,可以让普通元素拥有table元素的特性和效果。

原理和table一样,兼容效果好,不需要已知高度。

 .pn { display: table-cell; text-align: center; vertical-align: middle; } .box { display: inline-block; }

flex

flex是css3中最新布局方式,可以很方便实现各种布局效果。

利用flex的justify-content和align-items特性实现居中效果。

该方法实现简单,但是需要兼容flex特性。

 .pn { display: flex; justify-content: center; align-items: center; }

grid

grid是最新的布局方式,利用justify-self和align-self可以快速实现居中效果。

grid现在的兼容性不太好,使用时要注意。

 .pn{ display: grid; } .box{ justify-self: center; align-self: center; }

 

相关文章