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; ???????}跬步-CSS实现水平垂直居中
原文地址：https://www.cnblogs.com/Doraemon18/p/10256656.html