Question

这个问题可能是一个回答的问题，听起来可能很愚蠢。我想对齐任何元素，无论是文本，图像还是div，在垂直中心对齐，它也应该在响应式屏幕中工作。我确实通过添加margin-top和手动百分比来尝试它。我想知道是否有一种简单而好的方法可以使垂直对齐响应。

我甚至在google上做了一些关于它的研究，其中一些人建议将容器的显示属性更改为table，将div更改为table cell，然后使用垂直对齐作为中间。这听起来很简单但它也会影响页面中的其他元素，我不希望它们作为表格。因此，我正在寻找最好的替代选择。请帮忙。提前谢谢你：）

.in-middle{
   width:100%;
   margin-top: 25%;
}

<body>
  <div class="in-middle">
    <h1>This should be aligned in the center</h1>
    <p>Paragraph which should also be centered</p>
  </div>
</body>

Answer 1

您可以使用tranform属性：

使用以下解决方案

.in-middle{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div class="in-middle">
  <h1>This should be aligned in the center</h1>
  <p>Paragraph which should also be centered</p>
</div>

建议不要使用margin-top代替tranform来垂直居中元素。

Answer 2

您应该使用css3 flexbox。它会使您的内容垂直和水平居中，并且不会与其后面的内容重叠。

body {
  margin: 0;
}
.in-middle {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh;
}

<body>
  <div class="in-middle">
    <h1>This should be aligned in the center</h1>
    <p>Paragraph which should also be centered</p>
  </div>
  <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet...</p>
</body>

Answer 3

position: absolute;
   top: 50%;
   transform: translateY(-50%);

这将使元素垂直居中。

.in-middle{
   width:100%;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

<body>
  <div class="in-middle">
    <h1>This should be aligned in the center</h1>
    <p>Paragraph which should also be centered</p>
  </div>
</body>

Answer 4

使用flexbox：

.in-middle {
  height: 100%;      
  display: flex;
  align-items: center;
}

<body>
   <div class="in-middle">
      <h1>This should be aligned in the center</h1>
      <p>Paragraph which should also be centered</p>
   </div>
</body>

css中的垂直对齐响应

4 个答案: