如何在div内垂直居中可变高度的内容？

Question

当内容的高度可变时，垂直居中 div 内容的最佳方法是什么。 在我的特定情况下，容器 div 的高度是固定的，但如果有一个解决方案可以在容器高度可变的情况下工作，那就太好了。 另外，我希望有一个不使用或很少使用 CSS hack 和/或非语义标记的解决方案。

Answer 1

这是我针对具有动态（百分比）高度的 div 的出色解决方案。

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

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

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

自己尝试一下。

Answer 2

对我来说，最好的方法是：

.container{
  position: relative;
}

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

优点是不必明确高度

Answer 3

只需添加

position: relative;
top: 50%;
transform: translateY(-50%);

到内部 div 即可。

它的作用是将内部 div 的顶部边框移动到外部 div 的一半高度 (top: 50%;)，然后将内部 div 向上移动其高度的一半 (transform:translateY( -50%））。 这适用于position:absolute或relative。

请记住，transform 和 translate 具有供应商前缀，为简单起见，未包含这些前缀。

Codepen：http://codepen.io/anon/pen/ZYprdb

Answer 4

这似乎是我发现的解决此问题的最佳解决方案，只要您的浏览器支持 ::before 伪元素： CSS 技巧：以未知为中心。

它不需要任何额外的标记，而且似乎工作得非常好。 我无法使用 display: table 方法，因为 table 元素不遵守 max-height 属性。

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said—"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

Answer 5

这是我需要做很多次的事情，一致的解决方案仍然需要您添加一些非语义标记和一些特定于浏览器的技巧。 当我们获得对 css 3 的浏览器支持时，您将获得垂直居中而不会犯错。

为了更好地解释该技术，您可以查看我改编自的文章，但基本上它涉及添加额外的元素并在 IE 和支持非表格元素上的 position:table\table-cell 的浏览器中应用不同的样式。

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

有很多方法（黑客）可以在特定的浏览器集中应用样式。 我使用了条件注释，但请查看上面链接的文章以了解其他两种技术。

注意：如果您提前知道一些高度，如果您尝试将单行文本居中，或者在其他几种情况下，有一些简单的方法可以实现垂直居中。 如果您有更多详细信息，请输入它们，因为可能有一种不需要浏览器黑客或非语义标记的方法。

更新：我们开始获得更好的浏览器支持CSS3，引入了弹性盒和变换作为获得垂直居中（以及其他效果）的替代方法。 有关现代方法的更多信息，请参阅另一个问题，但请记住，浏览器支持对于 CSS3 来说仍然是粗略的。

Answer 6

使用子选择器，我采取了 Fadi 的上述答案令人难以置信，并将其归结为我可以应用的一条 CSS 规则。 现在我所要做的就是将 contentCentered 类名添加到我想要居中的元素中：

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said—"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

分叉的 CodePen： http://codepen.io/dougli/pen/Eeysg

Answer 7

您可以使用自动保证金。 使用 flex 时，div 似乎也垂直居中。

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

Answer 8

您可以使用 Flex 显示，如下面的代码：

.example{
  background-color:red;
  height:90px;
  width:90px;
  display:flex;
  align-items:center; /*for vertically center*/
  justify-content:center; /*for horizontally center*/
}

<div class="example">
    <h6>Some text</h6>
</div>

Answer 9

到目前为止对我来说最好的结果：

div居中：

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;