新手上路，请多包涵

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

我什至在谷歌上做了一些研究，其中一些人建议将容器的显示属性更改为表格，将 div 更改为表格单元格，然后使用垂直对齐作为中间。这听起来很简单，但它也会影响页面中我不想作为表格的其他元素。因此，我正在寻找最佳替代方案。请帮忙。先感谢您：）

 .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>

原文由 Harish 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css

阅读 379

2 个回答

得票最新

社区维基

发布于
2022-12-20

✓ 已被采纳

您可以使用以下解决方案，使用 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 来垂直居中元素。

原文由 Sebastian Brosch 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-20

你应该使用 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>

原文由 Mohammad Usman 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Stack Overflow 翻译

子站问答

访问

本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。

相似问题

找不到问题？创建新问题

css响应中的垂直对齐

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译