面试常见题——css实现垂直和水平居中

时间：2023-03-30 18:22:22 CSS

面试常见题——css实现垂直和水平居中.这个问题出现的频率比较高。当然，在我们的生活中，经常会有纵横居中的需求。css实现垂直和水平居中的三种方案1.显示：inline/inline-block对于容器中的元素来说是比较容易的。可以直接设置容器的text-align来实现内容元素的水平居中。如果设置垂直居中，需要设置容器的高度，然后设置easyline-height===height，如下：thisistext

.container{文本对齐：居中；高度：50px；背景：绿色；行高：50px；}2。容器中的元素为display:block，已知元素的宽高。在这种情况下，我们使用属性位置并设置偏移量来实现它。先设置容器的位置：relative，设置元素的位置为absolute，然后设置元素（.inner-box）的偏移top,left,margin-top,margin-left，其中top和left分别是设置为50%，而margin-top/margin-left的偏移量是元素本身高度/宽度的一半，为负值。代码如下：

.container{height:200px;宽度：200px；背景：粉色；位置：相对；}。内盒{位置：绝对;顶部：50%；左：50%；边距顶部：-50px；左边距：-50px；高度：100px；宽度：100px；背景：绿色；}3.容器内的元素显示：block，元素的宽高未知这种方法和方法2类似，不同的是不能通过设置margin-top/left偏移来达到效果，因为容器中元素的宽度和高度未知。这次我们设置left/top/bottom/right:0，然后设置margin:auto。代码如下：