css实现元素居中有什么方法，你知道几个？
发布时间：2022-04-18 14:26:04 所属栏目：语言 来源：互联网
导读：在开发中，很多需求需要我们对元素居中，例如文本居中，多行文本居中，块级元素水平居中、垂直居中等，那么这些要如何实现呢？下面是一些css实现元素居中的方法，有需要的朋友可以参考一下。 行内元素居中 文本垂直居中 单行文本垂直居中 单行文本的垂直居中
|
在开发中，很多需求需要我们对元素居中，例如文本居中，多行文本居中，块级元素水平居中、垂直居中等，那么这些要如何实现呢？下面是一些css实现元素居中的方法，有需要的朋友可以参考一下。 行内元素居中 文本垂直居中 单行文本垂直居中 单行文本的垂直居中是最简单的，设置line-height与盒子高度一样就可以。这里有一个误区，很多人设置单行文本居中的时候会同时设置height与line-height相同，其实大可不必设置height,只设置line-height就可以，这时候盒子的高度由line-height撑起来，与line-height完全相同。 .center { // 完全可以不设置高度 // height: 20px; line-height: 20px; } 多行文本垂直居中 1.vertical-align vertical-align可以指定行内元素的垂直对齐方式。这个方法需要多增加一个.center元素将需要居中的内容包裹起来。设置父元素的line-height为元素的高度，居中子元素.center的display为inline-block，使其拥有行内元素的特性，因为line-height的继承性，所以设置line-height: 20px;重置居中子元素的line-height，然后设置vertical-align: middle;在行框盒子内垂直居中对齐。 <div class="box"> <div class="center"> 虽然你们是扮演路人甲乙丙丁，但是一样是有生命、有灵魂的。 </div> </div> <style> .box { background-color: orange; line-height: 200px; width: 300px; } .center { background-color: green; line-height: 20px; display: inline-block; vertical-align: middle; } </style> 2.table-cell 不同于行内元素设置利用vertial-align会使当前元素垂直居中对齐，table-cell元素设置vertial-align会让它的子元素垂直居中对齐，就算子元素是块级元素也会垂直对齐，所以想要实现块级元素的垂直居中也可以使用这个方法。 .box { height: 200px; display: table-cell; vertical-align: middle; 块级元素垂直居中 那可不可以利用margin:auto;实现垂直方向的居中呢？当然可以，可以通过修改writing-mode改变块的流动，使块横向流动，此时height方向就会默认平铺撑满，设置margin:auto;就可以实现垂直方向的居中。但是这个方法有副作用，因为writing-mode属性的可继承性，会导致该元素下得所有子元素全部流方向全部变为横向。而且此时水平方向不能再使用此方法实现居中了。 （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
