如何使用 CSS 在父元素内垂直居中 <div>？ [复制]答案

【问题标题】：How to vertically center <div> inside the parent element with CSS? [duplicate]如何使用 CSS 在父元素内垂直居中 <div>？ [复制]
【发布时间】：2011-02-14 04:45:52
【问题描述】：

我正在尝试做一个小的用户名和密码输入框。

我想问，你如何垂直对齐一个div？

我拥有的是：

<div id="Login" class="BlackStrip floatright">
   <div id="Username" class="floatleft">Username<br>Password</div>
   <div id="Form" class="floatleft">
   <form action="" method="post">
      <input type="text" border="0"><br>
      <input type="password" border="0">
   </form>
   </div>
</div>

如何使 id 为 Username 和 Form 的 div 垂直对齐到中心？我试着说：

vertical-align: middle;

在 id 为 Login 的 div 的 CSS 中，但它似乎不起作用。任何帮助将不胜感激。

【问题讨论】：

看看。 stackoverflow.com/questions/396145/…

标签： css alignment centering

【解决方案1】：

使 div 元素居中的最简单方法是使用具有以下属性的此类。

.light {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

【讨论】：

【解决方案2】：

将 div 中的子元素居中。它适用于所有屏幕尺寸

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

<div id="parent">
    <div id="child">Content here</div>
</div>

更多详情，您可以访问这个link

【讨论】：

【解决方案3】：

我来晚了，但我自己想出了这个，这是我最喜欢的垂直对齐快速技巧之一。这非常简单，而且很容易理解发生了什么。

您使用:before css 属性将一个div 插入到父div 的开头，给它display:inline-block 和vertical-align:middle，然后将这些相同的属性赋予子div。由于vertical-align 用于沿一条线对齐，因此那些内联的 div 将被视为一条线。

将:before div 设为height:100%，子div 将自动跟随并对齐在一条非常高的“线”中间。

.parent:before, .child {
    display:inline-block;
    vertical-align:middle;
}
.parent:before {
    content:""; // so that it shows up
    height:100%; // so it takes up the full height
}

Here's a fiddle 来证明我在说什么。子 div 可以是任意高度，您无需修改其边距/填充。
还有here's a more explanatory fiddle。

如果你不喜欢:before，你可以手动放入一个div。

<div class="parent">
    <div class="before"></div>
    <div class="child">
        content
    </div>
</div>

然后只需将.parent:before 重新分配给.parent .before

【讨论】：

太棒了！我第一次看到它，我真的很想知道为什么它是完美的。我已经将 CSS 选择器修改为 .parent > * 所以我不再需要子选择器了。这意味着我可以在任何地方使用该课程！我会 +1000
太棒了！但是，为什么我们需要在之前插入一个 div，而不是直接垂直对齐子 div？（我认为它不起作用，但为什么呢？）
我能够使用这种技术在示例中的“子”div 中包含一个辅助子 div。然后，我的 CSS 文件中的媒体规则允许我在宽屏幕上的原始内容的右侧和下方显示新的子子内容，在窄屏幕上显示更小的内容，并且它们仍然垂直居中。换句话说，这对我有用的不仅仅是那个“子”div中的一些文本。

【解决方案4】：

您可以在另一个 div 中垂直对齐一个 div。请参阅this example on JSFiddle 或考虑以下示例。

HTML

<div class="outerDiv">
    <div class="innerDiv"> My Vertical Div </div>
</div>

CSS

.outerDiv {
    display: inline-flex;  // <-- This is responsible for vertical alignment
    height: 400px;
    background-color: red;
    color: white;
}

.innerDiv {
    margin: auto 5px;   // <-- This is responsible for vertical alignment
    background-color: green;   
}

.innerDiv 的边距必须采用以下格式：margin: auto *px;

[其中，* 是您想要的值。]

display: inline-flex 在支持 HTML5 的最新（更新/当前版本）浏览器中受支持。

它可能无法在 Internet Explorer 中运行：P :)

始终尝试为任何垂直对齐的 div（即 innerDiv）定义高度以解决兼容性问题。

【讨论】：

M 对 CSS 不太好，但在我遇到的这么多解决方案中，这个最适合我。
这在IE浏览器中不起作用。
@SteveBreese 停止使用 ie。 breakupwithie8.com
不兼容 IE9
此解决方案仅在添加标记为负责垂直对齐的部分以及外层上的高度时才有效。没有高度，它就行不通。

【解决方案5】：

我需要指定最小高度

#login
    display: flex
    align-items: center
    justify-content: center
    min-height: 16em

【讨论】：

【解决方案6】：

在我的 Firefox 和 chrome 中工作：

CSS：

display: flex;
justify-content: center;     // vertical align
align-items: center;         // horizontal align

【讨论】：

【解决方案7】：

现代浏览器中最好的方法是使用 flexbox：

#Login {
    display: flex;
    align-items: center;
}

某些浏览器需要供应商前缀。对于不支持 flexbox 的旧版浏览器（例如 IE 9 及更低版本），您需要使用 older methods 之一实现后备解决方案。

推荐阅读

【讨论】：

为了水平对齐，我还添加了justify-content: center。（虽然不是完全一样的场景。）
还有display: inline-flex，以防您希望父元素保留，好吧，内联:)
要将 div 一个一个堆叠在另一个之上，请使用 flex-direction: column
Flex 是我见过的最糟糕的方法，Bootstrap 太痛苦了，我更有可能使用 Javascript...
注意：如果您尝试使用“显示：内联框”将任何内容居中，请小心。内容的 line-height 会导致 inline-box 下方有额外的空间，结果是子元素稍微高于中心对齐。我不确定 html 规范的哪一部分导致了这种情况，但我发现它并不明显，并且花了一段时间才弄清楚 flexbox 的子项没有正确垂直居中的原因。

【解决方案8】：

你试过这个吗？

.parentdiv {
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 height: 300px; // at least you have to specify height
}

希望对你有帮助

【讨论】：

【解决方案9】：

@GáborNagy 对 another post 的评论是我能找到的最简单的解决方案，对我来说就像一个魅力，因为他带来了一个 jsfiddle，我在这里复制它并添加了一点点：

CSS：

#wrapper {
    display: table;
    height: 150px;
    width: 800px;
    border: 1px solid red;
}

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

HTML：

<div id="wrapper">
    <div id="cell">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>

如果您还希望水平对齐它，您必须在“单元格”div 中添加另一个 div“inner-cell”，并赋予它以下样式：

#inner-cell{
      width: 250px;
      display: block;
      margin: 0 auto;
}

【讨论】：

【解决方案10】：

这可以用 3 行 CSS 完成，并且兼容回（包括）IE9：

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

示例：http://jsfiddle.net/cas07zq8/

credit

【讨论】：

这太棒了，只有 3 行，它就像一个魅力。
这是我个人的最爱，尤其是当我可以将它用作 LESS 或 SASS 混音时。
打破响应式设计
您能否举例说明它如何以及为什么会破坏整个“响应式设计”？在我看来，它是否破坏响应式设计已经取决于您的项目结构。
WOAH .. 谢谢伙计，我不得不从滑块中删除 flexbox，因为它在 flex 父级和子级之间插入了额外的 div，这是完美的解决方案。

【解决方案11】：

我找到了一种非常适合我的方法。下一个脚本插入一个不可见图像（与 bgcolor 或透明 gif 相同），其高度等于屏幕上空白大小的一半。效果是完美的垂直对齐。

假设您有一个页眉 div (height=100) 和一个页脚 div (height=50)，并且您要对齐的主 div 中的内容高度为 300：

<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>"); 
</script>

将脚本放在要对齐的内容之前！

在我的例子中，我喜欢对齐的内容是宽高比为 100:85（宽度：高度）的图像（宽度 = 95%）。意味着图像的高度是其宽度的 85%。宽度为屏幕宽度的 95%。

因此我使用了：

var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));

将此脚本与

结合起来

<body onResize="window.location.href = window.location.href;">

而且你有一个平滑的垂直对齐方式。

希望这对你也有用！

【讨论】：

【解决方案12】：

http://jsfiddle.net/dvL512e7/

除非对齐的 div 具有固定高度，请尝试对对齐的 div 使用以下 CSS：

{
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: table;
}

【讨论】：

在 Firefox 中不起作用（在版本 40 上测试），但可以使用 img 标签代替 div。

【解决方案13】：

垂直对齐一直很棘手。

这里我已经介绍了一些垂直对齐 div 的方法。

http://jsfiddle.net/3puHE/

HTML：

<div style="display:flex;">

<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>

<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>

<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>

<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>

</div>

CSS：

em{font-style: normal;font-weight: bold;}
.container {
    width:200px;height:200px;background:#ccc;
    margin: 5px; text-align: center;
}
.content{
    width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}

【讨论】：

工作 jsFiddle jsfiddle.net/breese/3puHE/10
为什么我上面的链接不起作用？
所有框（HTML、JavaScript、CSS）都是空的。

【解决方案14】：

我发现这个网站很有用：http://www.vanseodesign.com/css/vertical-centering/ 这对我有用：

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

【讨论】：

【解决方案15】：

如果您使用的是固定高度 div，则可以根据您的设计需要使用 padding-top。或者你可以使用 top:50%。如果我们使用 div 比垂直对齐不起作用，所以我们根据需要使用填充顶部或位置。

【讨论】：

【解决方案16】：

如果你知道高度，你可以像这样使用带有负值margin-top 的绝对定位：

#Login {
    width:400px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px; /* width / -2 */
    margin-top:-200px; /* height / -2 */
}

否则，仅使用 CSS 就无法将 div 垂直居中

【讨论】：

【解决方案17】：

div 不能以这种方式垂直对齐，但是您可以使用边距或 position:relative 来修改其位置。

【讨论】：