html - 为什么垂直对齐：中间不适用于我的跨度或 div？

Question

我试图在另一个元素中垂直居中一个span或元素。但是，当我输入时，什么也没有发生。我尝试更改这两个元素的属性，但似乎没有任何效果。divdivvertical-align: middledisplay

这是我目前在我的网页中所做的：

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

这是一个显示它不起作用的实现的 jsfiddle：http: //jsfiddle.net/gZXWC/

score 223 · Accepted Answer

这似乎是最好的方法 - 自从我原来的帖子以来已经过去了一段时间，这就是现在应该做的：

.main {
  display: table;
  
  /* optional css start */
  height: 90px;
  width: 90px;
  /* optional css end */
}
        
.inner {
  border: 1px solid #000000;
  display: table-cell;
  vertical-align: middle;
}

<div class="main">
  <div class="inner"> This </div>
</div>

score 207 · Accepted Answer

使用 CSS3：

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

CSS：

.outer {
  display : flex;
  align-items : center;
}

使用“证明内容：中心；” 水平对齐元素

注意：这可能不适用于旧 IE

score 139 · Accepted Answer

试试这个，非常适合我：

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

score 35 · Accepted Answer

将 line-height 设置为与包含 div 的高度相同也可以

演示http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

score 28 · Accepted Answer

万一你不能依赖 flexbox....child放在.parent' 的中心。在像素大小未知（换句话说，总是）并且 IE9+ 也没有问题的情况下工作。

.parent { position: relative; }

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

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

score 27 · Accepted Answer

你应该穿上vertical-align: middle内部元素，而不是外部元素。设置外部元素的line-height属性以匹配外部元素的属性height。然后在内部元素上设置display: inline-block和。line-height: normal通过这样做，内部元素上的文本将以正常的行高换行。适用于 Chrome、Firefox、Safari 和 IE 8+

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

小提琴

score 12 · Accepted Answer

我用它来对齐包装器 div 中心的所有内容，以防它帮助任何人 - 我发现它最简单：

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

score 8 · Accepted Answer

这是一种现代方法，它利用了 CSS Flexbox 功能。您现在可以通过将这些样式添加到.main容器中来垂直对齐父容器中的内容

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; // To center align it horizontally as well
}

您还可以使用CSS Grids（基于网格的二维布局系统）。

.main {
  display: grid;
  justify-content: center;
  align-content: center;
}

下面是一种速记方法，但浏览器支持仍然很低 - https://caniuse.com/?search=place-items。

    .main {
      display: grid; // flex  -  works for both
      place-items: center;
    }

你很高兴去！

score 7 · Accepted Answer

在这里，您有两种方式进行垂直对齐的示例。我使用它们，它们工作得很好。一种是使用绝对定位，另一种是使用flexbox。

垂直对齐示例

使用 flexbox，您可以使用 using 将一个元素自身与另一个元素display: flex;对齐align-self。如果还需要水平对齐，可以在容器中使用align-items和。justify-content

如果不想使用 flexbox，可以使用 position 属性。如果您使容器相对而内容绝对，则内容将能够在容器内自由移动。所以如果你在内容中使用top: 0;and left: 0;，它会定位在容器的左上角。

然后，要对齐它，您只需将顶部和左侧的引用更改为 50%。这会将内容定位在内容左上角的容器中心。

因此，您需要更正此问题，将内容的一半大小向左和顶部平移。

score 6 · Accepted Answer

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

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

我们将父 div 设置为显示为表格，将子 div 设置为显示为表格单元格。然后我们可以在子 div 上使用 vertical-align 并将其值设置为 middle。此子 div 内的任何内容都将垂直居中。

score 5 · Accepted Answer

这是一篇关于如何垂直对齐的好文章。我喜欢浮动方式。

http://www.vanseodesign.com/css/vertical-centering/

的HTML：

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

以及对应的样式：

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

score 4 · Accepted Answer

这很简单。只需添加display:table-cell您的主要课程。

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

看看这个jsfiddle！

score 4 · Accepted Answer

这是最新最简单的解决方案 - 无需更改任何内容，只需将三行 CSS 规则添加到您希望居中的 div 容器中。我爱Flex Box#LoveFlexBox

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

奖金

该justify-content值可以设置为以下几个选项：

flex-start，这会将子 div 对齐到 flex 流在其父容器中开始的位置。在这种情况下，它将保持在顶部。
center，这将使子 div 与其父容器的中心对齐。这真的很整洁，因为您不需要添加额外的 div 来包裹所有子项，以将包装器放在父容器中以使子项居中。因此，这是真正的垂直中心（在column flex-direction. 中，类似地，如果将更改flow-direction为row，它将变为水平居中。
flex-end，这会将子 div 对齐到 flex 流在其父容器中结束的位置。在这种情况下，它将移动到底部。
space-between，这会将所有孩子从流程的开始传播到流程的结束。如果是演示，我添加了另一个子 div，以显示它们是分散的。
space-around，类似于space-between，但在流的开始和结束处有一半的空间。

score 0 · Accepted Answer

由于vertical-align在 a 上按预期工作td，因此您可以在中放置一个单元格table以div对齐其内容。

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

笨重，但据我所知。它可能没有其他解决方法的缺点。

score 0 · Accepted Answer

只需将内容放在高度为 100% 的表格中，并设置主 div 的高度

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

score 0 · Accepted Answer

要在另一个 div 中垂直居中 span 或 div 元素，请添加相对于父 div 的位置并将绝对位置添加到子 div。现在子 div 可以定位在 div 内的任何位置。下面的示例水平和垂直居中。

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

CSS：

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

html - 为什么垂直对齐：中间不适用于我的跨度或 div？

16 回答 16

Related

Reference