我的博客原文：https://wzb.me/posts/2019/10/28/css-centering.html“居中”是布局最常见的要求之一。CSS居中的方式有??很多种，什么时候选择合适的方案呢？这是一个值得思考的问题。法律声明警告：本作品以署名-非商业性使用-禁止演绎4.0非本地化版本(CCBY-NC-ND4.0)许可发布。您应了解与本文相关的所有行为均应遵循本协议。这是什么？写在前面，本文会根据具体场景选择相应的居中方式，帮你系统理清CSS居中。注意：为了简洁起见，本文给出的CSS代码只会给出定义布局的关键代码。水平居中（Horizo??ntallyCentering）对于内联/inline-*元素要居中内联元素，只需要为其父块级父元素定义如下CSS规则：.block-level-parent-of-inline-element{text-align:center;}这个对inlineinline-blockinline-tableinline-flex等有效，text-align不仅仅是为了文本的对齐说明，其实影响的是内联元素和文本（内联内容)在块级元素下。参考：文本对齐-CSS|MDN对于块级元素（blockelement），让块级元素居中，给它一个宽度（width），然后定义如下CSS规则。block-element{margin:0auto;}如果没有给出固定的块级元素宽度？然后它会填满整条线，这样它就不需要居中了……？像这样如果有多个块级元素怎么办？如果你想让多个块级元素水平居中，有两种方法。设置多个块级元素显示：inline-box；然后定义text-align:center;对于父元素（类似于上面的内联元素居中）.parent{text-align:center;}.block-elements{display:inline-block;}使用Flexbox.parent{display:flex;justify-content:center;}垂直居中（VerticallyCentering）用于内联（inline/inline-*）元素如文本（text）只有一行有链接（links）时，使内联元素/文本出现在垂直方向的中间，可以定义相等的内边距（padding）a{padding-top:20px;padding-bottom:20px;}另一种选择是将文本的行高设置为与元素的高度相同。.box{高度：60px；line-height:60px;}仔细想想，如果文字内容超过一行，或者响应式变化的情况下父元素尺寸变小，文字需要换行，就会出现这种情况。要解决这个问题，只需要设置文本不换行即可。框{高度：60px;行高：60px；white-space:nowarp;}当有多行文本时，也可以设置padding等于元素的顶部和底部，这样文本看起来在中间定义父元素为display:table;同时设置子元素显示：tabel-cell；并给它vertical-align:middle;属性。.box{显示：表格；高度：60px；}.boxp{显示：表格单元格；vertical-align:middle;}使用Flexbox将块级元素中的文本居中，并对其父元素使用Flex.box{display:flex;弹性方向：列；justify-content:center;}上面的效果是一样的，如下图所示。对于块级（block）元素，块级元素的高度已经确定。在实际情况中，很少会显式确定元素的高度。如果你真的可以确定一个元素的高度，你可以使用下面的方法。.parent{位置：相对；}.child{位置：绝对；顶部：50%；高度：100px；margin-top:-50px;}这里需要注意的是top属性的计算方法，可以参考CSS-top|MDN。无法确定块级元素的高度我们仍然可以使用类似于上面示例的方法，但是需要使用transform属性。.parent{位置：相对；}.box{位置：绝对；顶部：50%；transform:translateY(-50%);}translate的计算方法可以参考IstheCSS3transformtranslatepercentagevaluesrelativetoitswidthand/orheight?-StackOverflow如果你不关心元素的扩展，你就不会关心元素是否被拉伸。您只希望其内容垂直居中。您可以使用表格或CSS显示将其变成表格行为。主要{填充：5px;显示：表格；}maindiv{显示：表格单元格；vertical-align:middle;}可以看出元素被放大了。?Flexbox使用Flexbox垂直居中同样方便。.parent{显示：flex;弹性方向：列；justify-content:center;}水平和垂直居中你可以结合上面的方法来达到这个目的。但这里有一些更方便的方法。使用绝对定位后，当元素的高宽确定后，设置一个负的margin属性，其值等于高/宽的50%。.parent{位置：相对；}.child{高度：60px；宽度：180px；位置：绝对；顶部：50%；左：50%；margin:-30px00-90px;}这样居中浏览器的兼容性很好。不确定元素的高宽和上面的例子一样，使用绝对定位，只是换成了translate属性。.parent{位置：相对；}.child{位置：绝对；顶部：50%；左：50%；transform:translate(-50%,-50%);}Flexbox相信大家已经想到了Flexbox的实现方式，只需要将主轴和侧轴都设置为居中即可。.parent{显示：flex;证明内容：居中；align-items:center;}Gird要使元素居中，可以使用Grid的技巧。.parent{display:grid;}.parentdiv{margin:auto;}写在最后既然你对居中的方法和选择有了清晰的认识，你再也不怕居中了。XDReferencesCenteringinCSS-CSSTricksMDNFlex布局教程-阮一峰的博客CSSTransformsModuleLevel1-W3C候选推荐
