朝花夕拾：CSSCenteringCompleteGuide

RefertoCenteringinCSS:ACompleteGuideBYCHRISCOYIERONSEPTEMBER2,2014附件：文中涉及到flex的一些用法。如果你没有接触过flex布局，建议你看看阮一峰老师这篇攻略：Flex布局教程：语法博文地址：https://guitong.github.io/blo...展示效果更佳.文本：CSS居中：完整指南CSS居中是开发人员经常抱怨的问题之一。为什么一定要这么难？？他们嘲笑。我认为问题不在于实现起来有多难，而是实现它的方法太多了。在不同的情况下，如何选择才是真正让我们困惑的地方。所以现在，让我们做一个决策树来让CSS居中问题更容易解决。水平居中-->是inline还是inline-*元素（如文本或链接）？它是内联元素还是类内联元素？（例如文本和链接）您可以将内联元素放在块级父元素中，然后使用以下CSS代码使它们水平居中：.center-children{text-align:center;}https://codepen.io/chriscoyie...该方法适用于inline、inline-block、inline-table、inline-flex等类型的元素。-->是块级元素吗？它是块级元素吗？为了让一个块级元素居中，可以将它的margin-left和margin-right值设置为auto（它的width值是给定的，否则会填满容器，没必要居中）。通常像这样简写：.center-me{margin:0auto;}https://codepen.io/chriscoyie...无论我们将居中的块级元素或父元素的宽度如何，这都会起作用。请注意，您不能将浮动元素居中。不过有一个窍门。-->是否有不止一个块级元素？如果您需要在一行中水平居中放置多个块级元素，一个好的解决方案是更改它们的显示类型。这里有两个例子，使用了inline-block和flexbox方法：https://codepen.io/chriscoyie...除非你想让它们堆叠在一起，否则你刚刚使用的自动边距值仍然有效。https://codepen.io/chriscoyie...垂直居中垂直居中在CSS中很棘手。-->是内联还是inline-*元素（如文本或链接）？它是内联元素还是类内联元素？~~>是单行吗？是单线吗？有时内联/文本元素可以垂直居中，只是因为它们上下的填充相等。.link{padding-top:30px;padding-bottom:30px;}https://codepen.io/chriscoyie...如果由于某种原因，设置padding的方法不是可选的，你需要知道它不会居中对于换行文本，一个技巧是让它的行高等于它的高度。.center-text-trick{高度：100px；行高：100px；white-space:nowrap;}https://codepen.io/chriscoyie...~~>是多行吗？是多条线吗？对于多行文本的情况，仍然可以使用上下padding相等的方法使其垂直居中，但是如果这个方法失败，文本所在的元素可能是表格单元格，是否定义通过文字或CSS。（红叶注：这里的意思是可以直接使用table标签来声明元素，也可以通过给元素设置display:table-cell;属性来声明为tablecell，并设置父元素显示：表格；）。如果文本位于之类的元素内，则该元素具有CSS属性vertical-align:middle;默认情况下，所以我们不需要明确设置它。但是，如果手动更改CSS使其成为表格单元格元素，则需要显式添加此属性vertical-align:middle;。（更多关于那个。）这是一个非常清楚地展示这种方法的例子：https://codepen.io/chriscoyie...如果你不喜欢它或者它不起作用，也许你可以使用flexbox？单个子flex元素可以很容易地在父flex元素中垂直居中。.flex-center-vertically{显示：flex;证明内容：居中；弹性方向：列；height:400px;}https://codepen.io/chriscoyie...但是请记住，上面的讨论是基于元素父容器具有固定高度（px、%等）。如果这些方法都行不通，您可以使用“幽灵元素”技术，即在容器内放置一个全高的伪元素，文本将与其垂直对齐。.ghost-center{position:relative;}.ghost-center::before{content:"";显示：内联块；高度：100%；宽度：1%；vertical-align:middle;}.ghost-centerp{display:inline-block;vertical-align:middle;}https://codepen.io/chriscoyie...—>是块级元素吗？它是块级元素吗？~~>你知道元素的高度吗？你知道元素的高度吗？不知道网页布局的高度是很常见的，原因有很多：如果文本的宽度发生变化，重新布局时高度也会发生变化；元素（例如图像）在调整大小时会影响高度。ETC。但是如果你明确知道高度，你可以像这样垂直居中：.parent{position:relative;}.child{position:absolute;顶部：50%；高度：100px；margin-top:-50px;/*如果不使用box-sizing:border-box;*/}https://codepen.io/chriscoyie...~~>是未知高度的元素吗？未知元素高度？没关系。您仍然可以使用上面的方法将其居中。先绝对定位到父元素的半高位置，然后增加自己的半高距离。.parent{位置：相对；}.child{位置：绝对；顶部：50%；transform:translateY(-50%);}https://codepen.io/chriscoyie...~~>可以用flexbox吗？你可以使用flexbox吗？如果可以的话，这很简单。.parent{显示：flex;弹性方向：列；justify-content:center;}https://codepen.io/chriscoyie...水平和垂直居中可以任意组合前面的方法，达到完美的居中效果。但是我发现一般可以分为三类：—>是固定宽高的元素吗？元素是否有固定的宽度和高度？先将元素绝对定位到50%/50%的位置，然后加上一个负的margin值，使该值等于高宽的一半（注意：如果元素有padding，记得计算一下，参考例子以下）。这允许元素水平和垂直居中，具有良好的浏览器兼容性。.parent{位置：相对；}.child{宽度：300px；高度：100px；填充：20px；位置：绝对；顶部：50%；左：50%；边距：-70px00-170px；/codepen.io/chriscoyie...—>是未知宽高的元素吗？元素的宽高未知？如果不知道元素的宽高，可以将其transform属性设置为translate(-50%,-50%)。也可以达到同样的效果。.parent{位置：相对；}.child{位置：绝对；顶部：50%；左：50%；transform:translate(-50%,-50%);}https://codepen.io/chriscoyie...—>可以使用flexbox吗？你可以使用flexbox吗？要使元素水平和垂直居中，需要使用flex的两个属性：.parent{display:flex;证明内容：居中；align-items:center;}https://codepen.io/chriscoyie...—>你可以使用网格吗？这里有一个对单个元素非常有效的小技巧：body,html{height:100%;display:grid;}span{/*thingtocenter*/margin:auto;}https://codepen.io/chriscoyie...结论你完全可以在CSS中居中！！！