问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用 CSS 为所有浏览器垂直居中 div 元素？

社区维基
1
新手上路，请多包涵

我想用 CSS 垂直居中 div 。我不想要表格或 JavaScript，而只想要纯 CSS。我找到了一些解决方案，但它们都缺少 Internet Explorer 6 支持。

 <body>
    <div>Div to be aligned vertically</div>
</body>

如何在所有主要浏览器（包括 Internet Explorer 6）中垂直居中 div ？

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

Stack Overflow 翻译htmlcssalignmentvertical-alignmentcentering
阅读 522
2 个回答
得票最新
社区维基
1
✓ 已被采纳

下面是我可以构建的最好的全方位解决方案，用于垂直和水平居中固定宽度、 灵活高度 的内容框。它已经过测试并适用于最新版本的 Firefox、Opera、Chrome 和 Safari。

 .outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

 <div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

查看具有动态内容的工作示例

我内置了一些动态内容来测试灵活性，并且很想知道是否有人发现它有任何问题。它也应该适用于居中的叠加层——灯箱、弹出窗口等。

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

社区维基
1

最简单的方法是以下 三行 CSS：

1）位置：相对；

2) 上层：50%；

3) 变换：translateY(-50%)；

以下是一个 例子：

 div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

 <div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

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

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题