在另一个 div 的中间垂直居中 div

Posted 2023-03-05

【中文标题】在另一个 div 的中间垂直居中 div

【英文标题】：center div in the vertically in middle of another div

【发布时间】：2016-07-17 15:38:43

【问题描述】：

我想将 header-headline div 垂直居中在 header div 的中间，但无论我尝试什么，我都无法让它坐在中间。谁能给点建议？

html

<div class="main-wrapper-onepage">
<!-- header -->
<div class="header">
<div class="header-headline">Dan Morris</div>
</div>
<!-- header-end -->
</div>

CSS

.header 
    width:100%;
    height:667px;
    background-image:url(../images/header_background.jpg);
    background-size:cover;
    text-align:center;


.header-headline 
    width:100%;
    text-align:center;
    font-size:70px;
    color:#FFF;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    display:inline-block;
    vertical-align:top;

这里是 JSfiddle：https://jsfiddle.net/w77pdnxh/

【问题讨论】：

Horizontally center a div in a div的可能重复

居中是指水平居中还是垂直居中？当我运行你的 jfiddle 时，它​​对我来说是水平居中的。

您需要支持哪些浏览器版本？ HTML5 是一种选择吗？如果是这样，弹性盒有一个很好的解决方案。否则，您将需要使用 inline-block 做一些诡计。

也可能与Vertically centering a div inside another div有关

所以基本上，这是一个非常普遍的问题，已经被问了一百万次了。阅读之前提出的问题，您会找到答案。

【参考方案1】：

您可以使用flexbox's align-items: center 将标题垂直居中。代码如下：

.header 
  ...
  display: flex;
  align-items: center;

JSFiddle Here

【参考方案2】：

将header-header 的位置设置为相对，然后设置top:50%，如下面的jsfiddle 所示。 header-header 将是 relative 到外部 div 并放置在顶部和底部之间的中间点。

https://jsfiddle.net/w77pdnxh/2/

【讨论】：

将 margin-top: -50%; 添加到 .header-headline 以说明 div 的大小，这样您就可以完美居中了。

@MikeC 昨晚我下班开车回家时突然想到我忘了考虑 div 的大小。太好了:)