许多

Question

如何将<div>中的<div>垂直居中？

到目前为止我的代码：

<div style="height:322px;overflow:auto;">
    <div style="border: Solid 1px #999999;padding:5px;">
    </div>
</div>

我尝试过“top：50％;”和“vertical-align：middle;”没有成功

编辑：好的，所以我们已经讨论了很多。而且我可能会开始另一场迷你火焰战。但为了争论，我怎么用桌子做呢？到目前为止，我已经将css用于其他所有事情，所以我并不想尝试采用“良好做法”。

编辑：内部div没有固定的高度

Answer 1

简而言之，你被塞满了。在最近的一个问题中我更多地提到Can you do this HTML layout without using tables?基本上，CSS狂热分子需要掌握并意识到，如果没有桌子，你只能做一些你不能做（或不能做得好）的事情。

这种反桌歇斯底里是荒谬的。

表格单元格可以很好地处理垂直居中，并且可以根据您的需要向后兼容。它们还比浮点数，相对/绝对定位或任何其他CSS类型方法更好地处理并排内容。

乔尔在Don't Let Architecture Astronauts Scare You中创造（或至少推广）“建筑师宇航员”一词。那么，同样地，我认为“CSS宇航员”（或“CSS Space Cadet”）这个词同样适用。

CSS是一个非常有用的工具，但它也有一些非常严重的限制。我最喜欢的是编号列表可能只显示为“3”。但不是“3）”或“（3）”（至少在CSS3生成内容之前 - 或者是CSS2.1？无论哪种方式都没有得到广泛支持）。多么疏忽。

但比这更大的是垂直居中和并排布局。对于纯CSS来说，这两个领域仍然是一个巨大的问题。另一张海报决定了相对定位和负边距高度是要走的路。怎么会比这更好：

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    #outer { height: 200px; border: 1px solid black; width: 600px; background-color: #DDD; }
    #inner { width: 150px;  border: 1px solid red; background: yellow; margin: auto; line-height: 100%;  }
  </style>
</head>
<body>
<table>
<tr>
<td id="outer">
  <div id="inner">Inner</div>
</td>
</tr>
</table>
</body>
</html>

每次都可以在任何地方使用。

这是article on vertical centering in CSS。为了达到类似的目的，他们使用三个嵌套的div 和相对+绝对+相对定位来获得垂直居中。我很抱歉，无论是谁写的 - 以及任何认为这是一个很好的迪亚的人 - 都只是失去了情节。

Tables vs CSS: CSS Trolls begone给出了反驳。证据确实存在于布丁中。绝大多数前20名（Alexa）网站仍然使用表格进行布局。 有充分的理由。

因此，请自行决定：您是否希望您的网站能够正常工作，并且花费更少的时间来实现它？或者你想成为一名CSS宇航员吗？

Answer 2

这不是一件容易的事，可能会有一些警告，而且此时CSS处理得不是很好。

然而被广泛讨论并且googleable。 This就是一个很好的例子。

无论你做什么，请不要回到桌子上。

编辑：这很荒谬，以下在严格的文档中非常有效，而不需要使用表格标记：

<style type="text/css">
.outer {height: 322px; overflow: hidden; position: relative;}
*|html .outer {display: table; position: static;}

.middle {position: absolute; top: 50%;}
*|html .middle {display: table-cell; vertical-align: middle; position: static;}

.inner {position: relative; top: -50%; overflow: auto;}
*|html .inner {position: static; max-height: 322px;}
</style>
<!--[if IE]>
<style>
.inner {height: expression(Math.min(this.scrollHeight,322)+'px'); width: 100%;} /* for explorer only */
</style>
<![endif]-->

<div class="outer">
    <div class="middle">
        <div class="inner">
          Any text any height
        </div>
    </div>
</div>

Answer 3

我最喜欢this solution。它适用于IE8 +，易于理解。

<style>
/* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
</style>

<div class="block"><div class="centered">Centered Content</div></div>

Answer 4

上：50％;应该管用。你需要将margin-top设置为负高度的一半，否则它将从中间开始。因此，您需要内部div的高度。你也可能需要职位：亲属;

对你来说这样的内心div。

position:relative;
top: 50%;
height:80px;
margin-top: -40px; /*set to a negative number 1/2 of your height*/

使用负片尺寸不是很整齐（甚至意味着什么？）但也许是最简单的方法。

Answer 5

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
    vertically centered
    </div>
  </div>
</div>

更多information

Answer 6

许多

的两种技巧

以下浏览器兼容性仅在IE中进行了测试。现代浏览器应该可以解决这些问题。

＃1 - 绝对和自动保证金

兼容性： IE 8 +

顶部，右侧，底部，左侧和margin: auto的组合使div垂直和水平居中。
需要宽度和高度，但可以是百分比

也可以应用于父集position: relative

的内部div

注意： {1}}和max-width而不是百分比高度可能是IE 9 +。 IE 8需要max-height。

height

html,
body {
  height: 100%;
}
.outer {
  background: #ff8f00;
  height: 50%;
  width: 50%;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

＃2 - Flexbox

兼容性： IE 11.请参阅here for other browser support。

使用Flexbox和灵活的vw and vh lengths

<div class="outer"></div>

body {
  margin: 0;
}

.outer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.inner {
  width: 50vw;
  height: 50vh;
  background: #ff8f00;
}

Answer 7

你绝对需要用css做这个吗？上面的链接看起来很不错，但你可以使用javasctipt / jquery得到一个结果 - 确定内部div的高度并相应地调整margin.padding。类似的东西：（jquery）

var gap = ( $('the-outer-div').height() - $('the-inner-div').height() ) /2;
$('the-inner-div').css( "margin-top" , gap );

Answer 8

如果您愿意使用flexbox显示模型，则无需使用表格。

E.g。

<div style="height: 322px; width: 200px; display: flex; background: gray;">
    <div style="border: Solid 1px #999999; padding:5px; margin: auto;">
      This text would be both vertically AND horizontally centered, if it's inner height and width were less than the parent's height and width.
    </div>
</div>

如果你只想要垂直居中，请使用规则＆＃34; margin：auto 0;＆＃34;在孩子div。

P.S。如果您想要跨浏览器兼容性（例如＆＃34;显示：-webkit-flexbox;＆＃34;）

，您必须为使用flexbox添加前缀

Answer 9

display: flex属性特别适用于垂直和水平居中。对于垂直居中，请将属性display: flex和justify-content: center添加到容器中。

Answer 10

尝试行高

css垂直居中

10 个答案:

许多

＃1 - 绝对和自动保证金

＃2 - Flexbox