首页 >web前端 >css教程 >如何使 Div 在其父 Div 中垂直居中?

如何使 Div 在其父 Div 中垂直居中?

Linda Hamilton
Linda Hamilton原创
2024-12-21 04:38:10690浏览

How to Vertically Center a Div within its Parent Div?

使 Div 在父 div 内垂直居中

使 div 在其父 div 内垂直居中可以通过多种方法实现,无需依赖特定元素尺寸。

表格布局(经典方法)

此方法利用表格布局和内联块显示属性。

<div class="container">
  <div class="inner">
    ...
  </div>
</div>
.container {
  display: table-cell;
  vertical-align: middle;
  height: 500px;
  width: 500px;
}

.inner {
  display: inline-block;
  width: 200px;
  height: 200px;
}

变换(现代方法)

转换为垂直领域提供了更简单的解决方案

.container {
  position: relative;
  height: 500px;
  width: 500px;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

Flexbox(首选现代方法)

Flexbox 提供了最直接的居中对齐方法。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
}

.inner {
  width: 200px;
  height: 200px;
}

注意:

  • 表格布局方法得到了很好的支持,但可能会影响性能。
  • Transform 和 Flexbox 提供了具有更强支持和易用性的现代解决方案。
  • 无论表格的尺寸或内容如何,​​这些方法都可确保垂直居中内部 div。

以上是如何使 Div 在其父 Div 中垂直居中?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn