如何在 div 内垂直居中 <span>？ [复制]答案

【问题标题】：How to vertically center a <span> inside a div? [duplicate]如何在 div 内垂直居中 <span>？ [复制]
【发布时间】：2011-05-20 10:18:34
【问题描述】：

代码：

<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>

现在渲染时，span 对齐 div 的左下角。

【问题讨论】：

标签： html css center

【解决方案1】：

请参阅我在understanding vertical alignment 上的文章。在讨论结束时，有多种技术可以实现您想要的。

(超短总结：要么将子元素的行高设置为容器的高度，要么在容器上设置定位并将子元素绝对定位在top:50% 和margin-top:-YYYpx, YYY是孩子已知身高的一半。）

【讨论】：

@Blender Heh，尽管其中引用了第三个选项：display:table-cell; vertical-align:middle（以及 display:table-row 父级）。 :) 但是不，你可以肯定我会never advocate using HTML table elements for layout。
那么如果你想在没有固定高度的情况下做到这一点，没有办法做到吗？
@Kyralessa 不，如果您没有固定的内容高度，则存在一些尚未在我的页面中列出的技术。例如，请参阅：css-tricks.com/centering-in-the-unknown
@Phrogz - 您应该将css-tricks.com/centering-in-the-unknown 中的最后一个选项添加到您的答案中。太干净了，而且 ie8+！
如果YYY 未知怎么办？？

【解决方案2】：

在你的父 DIV 添加

display:table;

并在您的子元素处添加

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

【讨论】：

这行得通，但是是否有一种简单的方法也可以将父元素中的子元素水平居中？由于孩子的显示不再是内联块，父母的“文本对齐：中心;” CSS 不再有效。

【解决方案3】：

单行跨度快速解答

使子级（在本例中为跨度）line-height 与父级 <div> 的高度相同

<div class="parent">
  <span class="child">Yes mom, I did my homework lol</span>
</div>

然后您应该添加 CSS 规则

.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }

或者你可以使用子选择器来定位它

.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }

我自己使用这个的背景

我遇到了类似的问题，我需要将移动菜单中的项目垂直居中。我在同一行高内制作了 div 和 span。请注意，这是针对流星项目的，因此不使用内联 css ;)

HTML

<div class="international">        
  <span class="intlFlag">
    {{flag}}        
  </span>

  <span class="intlCurrent">
    {{country}}
  </span>

  <span class="intlButton">
    <i class="fa fa-globe"></i>
  </span> 
</div>

CSS（div 中多个跨度的选项）

.international {
  height: 42px;
}

.international > span {
  line-height: 42px;
}

在这种情况下，如果我只有一个跨度，我可以将 CSS 规则直接添加到该跨度。

CSS（一个特定跨度的选项）

.intlFlag { line-height: 42px; }

这是我的显示方式

【讨论】：

为高质量的子 div 示例文本点赞。

【解决方案4】：

As in a similar question，使用带有占位符元素的display: inline-block 将块元素内的跨度垂直居中：

html, body, #container, #placeholder { height: 100%; }

#content, #placeholder { display:inline-block; vertical-align: middle; }

<!doctype html>
<html lang="en">
  <head>
  </head>

  <body>
    <div id="container">
      <span id="content">
        Content
      </span>
      <span id="placeholder"></span>
    </div>
  </body>
</html>

垂直对齐仅适用于inline elements or table cells，因此在垂直居中块元素时将其与display:inline-block 或display:table-cell 一起使用，并带有display:table 父级。

参考资料：

CSS Horizontal and Vertical Centering

【讨论】：

只要不包装#content，该解决方案就可以工作

【解决方案5】：

向父 div 添加一个高度，例如 50 像素。在子跨度中，添加 line-height: 50px; 现在跨度中的文本将垂直居中。这对我有用。

【讨论】：