css让元素居中,css 元素居中

前言

　　刚入职时，被面试官一连串中间问题虐的场景历历在目。“如何实现文本居中？”“如果是多行文字呢？”“如何实现块级元素的水平居中？”“如何实现块级元素的垂直居中？”。被问到脑子里一团浆糊，我不知道怎么回答我知道的。居中是日常工作中不可避免的场景，在面试中也经常出现。本文针对这些问题，希望能帮助到和我当年一样迷茫的同学们，让他们在以后的工作和面试中更自如的面对对中问题。

行内元素居中

文本垂直居中

　　单行文本垂直居中

　　单行文本的垂直居中是最简单的，只需将行高设置为与框的高度相同。

　　这里有一个误解。当设置单行文本的中心时，许多人将高度设置为与行高相同。其实不需要设置高度，只需要设置行高即可。此时，框的高度由line-height支持，line-height与line-height完全相同。居中{//您可以不设置任何高度。//高度：20px行高：20px}多行文本垂直居中

　　1 .垂直对齐

　　Vertical-align可以指定一行中元素的垂直对齐方式。

　　此方法需要添加一个附加的。元素来包装需要居中的内容。将父元素的行高设置为元素的高度，并显示中间的子元素。中心作为行内块，使其具有行内元素的特征。因为line-height的继承性，设置line-height:20px；重置居中子元素的行高，然后设置vertical-align:middle；在行框中垂直居中对齐。

　　Div= box div class= center 虽然你在扮演路人，但你还活着，还有灵魂。/div/divstyle.box {背景色：橙色；行高：200像素；宽度：300px}.中心{背景色：绿色；行高：20px显示：内嵌-块；垂直对齐：居中；}/style 2 . table-单元格

　　与行内元素设置不同，当前元素将使用垂直对齐垂直居中。为table-cell元素设置vertial-align将使其子元素垂直居中，即使子元素是块级元素，因此也可以使用此方法来实现块级元素的垂直居中。box { height:200 px；显示：表格单元；垂直对齐：居中；}

行内元素水平居中

　　 text-align控制子行中元素的水平对齐。这个很简单。直接设置文本对齐：居中即可。center { text-align:center；}

块级元素水平居中

　　 margin的值为auto，可以占据相应方向的所有剩余空间。如果水平方向上两个方向的边距值都设置为auto，剩余空间将在两个方向上平均分配，从而实现居中。

　　那么为什么我们从来没有使用这种方法来实现垂直居中呢？因为auto值起作用有一个前提条件，就是如果没有在相应的方向设置特定的长度，就会自动铺好。很明显，宽度可以用父元素覆盖，高度不行。居中{边距：0自动；}

块级元素垂直居中

　　，可以用margin:auto吗？垂直居中呢？当然，您可以通过修改写入模式来改变块的流向，从而使块水平流动。此时会默认平铺高度方向，设置margin:auto；可以实现垂直对中。但是，这种方法有一个副作用，因为writing-mode属性的可继承性会导致该元素下所有子元素的所有流向都变成水平。这时候水平方向就不能再用这种方法居中了。

　　Div= box div class= center 虽然你在扮演路人，但你还活着，还有灵魂。/div/divstyle.box {背景色：橙色；高度：200px书写模式：垂直-lr；}.中心{背景色：绿色；高度：50px边距：自动0；}/style那么有没有可能利用这个特性来实现垂直和水平对中呢？也有可能。让我们继续往下看

水平垂直居中

　　 1 .位置(居中元素的宽度和高度是固定的)

　　设置父元素的绝对位置和中心元素的相对位置。上、右、下、左的值都是0。此时，如果没有设置特定的宽度和高度，中心元素将在水平和垂直方向上都被父元素覆盖。此时设置具体的宽高适合边距：auto可以达到绝对居中。

　　注意，这种方法只能兼容IE8及以上浏览器。如果项目与IE7兼容，可以使用下面的方法。框{位置：相对；}.中心{位置：绝对；宽度：200px高度：200pxtop:0；底部：0；左：0；右：0；边距：自动；}2 .垂直校准

　　首先实现居中元素在水平方向的居中，并将居中元素的显示值设置为inline-clock，使其具有行内元素的特征。为外部框元素设置text-align:center；将中心元素水平居中。

　　然后实现垂直方向的对中。该方法需要添加一个辅助元素，并设置辅助元素高度：100%；使当前行框的高度充满父元素，然后设置vertical-align:middle；使其垂直居中并对齐。

　　div class= box div class= assist /div div class= center 虽然你在扮演路人，但是你还活着，还有灵魂。/div/divstyle.box {背景色：橙色；高度：200px宽度：500px文本对齐：居中；}.中心{背景色：绿色；宽度：150px显示：内嵌-块；垂直对齐：居中；}.assist { display:inline-block；身高：100%；垂直对齐：居中；}/style3 .带边距的位置

　　当居中元素的宽度和高度已知时，此方法适用。设置父元素的相对位置和中心元素的绝对位置。left和top的值都是50%。left和top的值分别相对于父元素的宽度和高度进行计算。此时，中心元素的左上角将位于父元素的中心。然后，将居中元素的margin-left和margin-top设置为其宽度和高度的负一半，使居中元素在水平方向上向左偏移其自身宽度的50%，在垂直方向上向左偏移其自身高度的50%，即可实现居中效果。

　　Div= box div class= center 虽然你在扮演路人，但你还活着，还有灵魂。/div/divstyle.box {背景色：橙色；高度：200px宽度：500px位置：相对；}.中心{背景色：绿色；宽度：150px高度：50px位置：绝对；top:50%；左：50%；左边距：-75px；margin-top:-25px；}/style4 .用变换定位

　　第四种方法是使用带变换的位置。这种方法在原理上和前面的方法基本相似，只是场景的使用增加了宽度和高度不固定的元素。和前面一样，设置父元素的相对定位和中心元素的绝对定位，左边和上边的值都是50%。设置中心元素变换：trash (-50%，-50%)；translate的百分比值是相对于自身计算的，这样对中元素在水平方向可以向左偏移其宽度的50%，在垂直方向可以向左偏移其高度的50%，就可以达到对中的效果。

　　Div= box div class= center 虽然你在扮演路人，但你还活着，还有灵魂。/div/divstyle.box {背景色：橙色；高度：200px宽度：500px位置：相对；}.中心{背景色：绿色；宽度：150px位置：绝对；top:50%；左：50%；transform: traslate(-50%，-50%)；}/style5.flex

　　如果不需要考虑与IE9及之前浏览器的兼容性，flex布局是最值得推荐的方式。

　　将父元素设置为flex容器，主轴和横轴对齐居中。关于flex的相关知识，可以参考阮的博客，非常详细。box { display:flex；对齐-项目：居中；justify-content:居中；}就是这样。本文介绍了在css中实现元素居中的N种方法。更多相关css元素居中内容，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。