<div>中垂直居中对齐

Question

我希望保持 #abc div 的高度为 50px，并使文本垂直居中对齐在 div 中。

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

- Outdated Computer Tech

---

请查看此链接 https://dev59.com/jWMl5IYBdhLWcg3wJUEC#65415977，在同一篇帖子中，就在下面，它适用于所有人，而不使用该死的表格。 - Mayank Rajput

Answer 1

你可以使用line-height: 50px;，这样你就不需要使用vertical-align: middle;了。

演示

---

以上方法如果有多行文本将会失败，所以在这种情况下，您可以使用 span 包裹文本，然后使用 display: table-cell; 和 display: table; 以及 vertical-align: middle;，同时不要忘记为 #abc 使用 width: 100%;。

演示

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

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

---

我可以想到另一个解决方案，就是使用transform属性和translateY()方法，其中Y显然代表Y轴。这很简单...你只需要将元素的位置设置为absolute，然后从top位置设置为50%，并且沿着它的轴使用负-50%进行移动。

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

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

演示

请注意，这不支持旧浏览器，例如IE8，但您可以使用相应的前缀 -ms，-moz 和 -webkit 使IE9和其他较旧版本的Chrome和Firefox浏览器。

有关 transform 的更多信息，请参见 此处。

- Mr. Alien

---

这不适用于长文本。 - Ms Designer

神奇地以转换方式适用于我@@ - Nam G VU

神奇地对我起作用，以转化的方式@@ - undefined

Answer 2

这是一个旧问题，但是如今CSS3使垂直对齐变得非常简单！

只需在#abc添加以下CSS：

display:flex;
align-items:center;

简单演示

原始问题演示 已更新

简单示例：

[这里是代码，未进行翻译]

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

- Jaqen H'ghar

---

我建议还要添加以下代码： display:grid; align-items:center;当您需要垂直对齐多个对象时，这种方式会更好地发挥作用。 - Leonardo Daga

哪些浏览器支持 CSS3？ - Kiquenet

@Kiquenet，全球市场占有率92% https://caniuse.com/#search=align-items - Daniel Kucal

这个非常好用，谢谢。其他一些帖子在这里已经过时了，我建议实施这个方法，而不是像其他方法那样使用更重的手段。 - Travis J

Answer 3

很简单：给父div加上这个：

display: table;

并为子div添加以下内容:

display: table-cell;
vertical-align: middle;

就是这样！

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

- Burak Çanga

---

这种方法不好，因为它把表格用作一种hack。虽然在大多数情况下可能有效，但当你想改变"表格"的宽度时，它将不能正常工作（我现在就遇到了这个问题）。 - Kevin Simple

我不需要添加 display:table; 到父元素中使其工作。 - Vince

也许这是一个hack... 但它可行，而大多数其他解决方案仅适用于特定情况，并且在我们的情况下通常无法使用。 - Jerry

这种解决方案的优点是：适用于所有类型的内容（不仅仅是文本，也不仅仅是单行...）。 - Jerry

Answer 4

我发现了Sebastian Ekström的这个解决方案。它快速、简单，而且非常有效。即使您不知道父元素的高度也能使用：

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

阅读完整文章，请点击这里。

- Great Scott

---

由于变换的结果可能导致物体被定位在半个像素位置上，因此这可能会使事情变得模糊不清。 - Kevin Wheeler

这篇帖子有一个针对该问题的更新。在父级元素中：transform-style: preserve-3d;！ - Andry

Answer 5

 div {
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;
}

.text-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="text-align-center"> Align center</div>

- Fouzia Khan

---

请解释一下！ - Szabolcs Páll

align-items: center 只垂直对齐文本，而不水平对齐。 justify-content: center 则可以解决这个问题。.text-align-center 是您需要将元素对齐到中间 div 的确切三行代码。谢谢。 - Jeson Martajaya

Answer 6

您可以将行高设置为与div的高度一样大。 但对我来说，最好的解决方案是这个 -> position:relative; top:50%; transform:translate(0,50%);

- Andris

Answer 7

如何添加line-height？

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

这里是 jsfiddle 上的示例代码

或者在 #abc 上使用 padding。可以点击这里看到带有 padding 的效果

更新：

在 CSS 中添加：

#abc img{
   vertical-align: middle;
}

这是结果。希望这是你要找的内容。

- Aldi Unanto

Answer 8

试试这个：

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

居中的另一种方法：

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

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

- Friend

Answer 9

.container { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<h2>Centering Div inside Div, horizontally and vertically without table</h2>
<p>1. Positioning and the transform property to vertically and horizontally center</p>
<p>2. CSS Layout - Horizontal & Vertical Align</p>

<div class="container">
  <div class="center">
    <p>I am vertically and horizontally centered.</p>
  </div>
</div>

- Mayank Rajput

Answer 10

这段代码用于垂直居中和水平居中对齐，无需指定固定高度：

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

- nilesh pawar