CSS中垂直居中和水平垂直居中的方法
发布网友
发布时间：2024-09-15 07:28
共1个回答
热心网友
时间：2024-10-23 15:43
第一种：通过设置父元素为flex属性，并在交叉轴上使用center属性，可以轻松实现元素的垂直居中效果。
flex布局水平垂直居中方法：
第二种：采用position和transform结合的方式，可以轻松实现元素的垂直居中。
使用position和transform实现水平垂直居中。
第三种：通过设置元素的高度和行高相同，可以实现水平居中。
不设置高度，使用内边距改变元素的宽度，同时实现文字的居中效果。
第四种：使用position和calc属性实现垂直居中和水平垂直居中。
与position和transform类似，但使用calc属性可以直接计算距离。
一定要给元素设置宽高，以便在计算时更加方便。
第五种：使用绝对定位和margin实现垂直居中。
必须设置元素的宽高，这样在margin：auto时，宽高才不会被拉伸到和父元素一样大。
同样，我们可以使用这种方法实现垂直水平居中。
绝对定位后，将元素的四面都设置为0，然后使用margin:auto，即可实现水平垂直居中的效果。
第六种：使用display: table-cell实现多行文字的垂直居中。
在CSS布局过程中，我们经常遇到多行文字需要居中的问题。这时，我们可以使用单元格的形式，让文字居中。需要注意的是，vertical-align: middle;属性要写在设置了单元格的元素上。
第七种：使用vertical-align属性实现垂直居中和元素的对齐。
vertical-align属性要求元素必须是inline或inline-block元素。经常会遇到使用该属性没有效果的情况，一般是因为元素的性质发生了变化，例如元素为block、浮动、绝对定位等。
首先，我们可以看到容器里有两个inline-block元素，但是文字并没有与图片顶部对齐，而且可以看到，图片下方有一块留白。这是因为所有的inline和inline-block元素都自带了vertical-align属性，默认是base-line对齐，而且是以文字流的base-line对齐。因为文字的基线比图片低，所以图片为了强行对齐，导致了下面的空白。解决方法有两种：改变对齐方式，或者将行高设置为0（前提是有自身高度，否则文字会缩成一行）。
这样可以让文字近似垂直居中。因为近似，一般不建议直接使用middle，使用vertical-align: top;加margin-top的形式会让我们不出现bug。
当然，还有很多方法可以达到居中效果，但都大同小异。这里最推荐的是使用flex布局达到的居中效果，因为兼容性最好。如果能学会flex布局，基本上大部分布局问题都可以解决了。
