怎么垂直的中心内容的变高度的内部?

StackOverflow https://stackoverflow.com/questions/59309

  •  09-06-2019
  •  | 
  •  

题

的最佳方式是什么垂直的中心内容的一个div当高度的内容是可变的。在我的特定情况下，容器的高度div是固定的，但这将是巨大的，如果有一个解决方案，将工作的情况下，容器具有变高度。此外，我爱一个解决方案没有或很少使用的CSS黑客和/或非语义标记。

alt text

有帮助吗？

解决方案

只是添加

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

内div。

什么它不是运动内部的顶部边界的一半高度的外div(top: 50%;)和随后的内部通过的一半，其高度(transform: translateY(-50%)).这将工作 position: absolute 或 relative.

请记住， transform 和 translate 有供应商的前缀其中不包括用于简单。

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

其他提示

这似乎是最好的解决办法，我发现这个问题，只要浏览器支持的 ::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&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

这是我们需要做很多次和一个一致的解决方案仍然需要你加一点非语义标记和一些浏览具体的黑客。当我们获得支持的浏览器css3你会得到你的垂直居中没有犯罪。

为了更好地解释的技术你可以看看 文章我适应它, 但它基本上涉及增加一个额外的元件和适用不同的风格在即和浏览器，支持 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，使flex-box和转化作为替代方法获取垂直居中(除其他效果)。看看 这个其它问题 更多信息，关于现代方法，但是请记住，浏览器的支持仍然略为CSS3。

使用儿童的选择，我们采取的 法迪是令人难以置信答案 上面煮它只是一个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&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

叉CodePen: http://codepen.io/dougli/pen/Eeysg

最好的结果对我来说迄今为止:

div可以为中心：

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

你可以使用的保证金。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>

这是我的真棒解决方案 div 与动态(percentaged)的高度。

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>

试试这个通过你自己。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top