html - 如何在 div 内垂直居中 <span>？

代码:

<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 的左下角。

最佳答案

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

(超短总结:要么设置子元素的行高等于容器的高度，要么设置容器上的定位并将子元素绝对定位在top:50% 与 margin-top:-YYYpx，YYY 是 child 已知高度的一半。)

关于html - 如何在 div 内垂直居中 <span>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4357315/