CSS垂直居中

一尘不染

CSS垂直居中

css

我怎么能垂直居中<div>内的<div>？

到目前为止，我的代码：

<div style="height:322px;overflow:auto;">
    <div style="border: Solid 1px #999999;padding:5px;">
    </div>
</div>

我已经尝试过“ top：50％”；和“ vertical-align：middle”；没有成功

编辑：
好的，所以已经讨论了很多。我也许已经开始了另一场小型的火焰战争。但是为了论证，那我该如何用一个表呢？到目前为止，我已经将CSS用于其他所有内容，所以这并不是说我没有尝试采用“良好做法”。

编辑： 内部div没有固定的高度

阅读 271

2020-05-16

共1个答案

一尘不染

简而言之，您已被塞满。我最近问了一个问题，您可以在不使用表的情况下进行HTML布局吗？
基本上，CSS狂热者需要抓紧时间并意识到，有些事情如果没有表就无法做（或做得不好）。

这种反餐桌的歇斯底里简直荒唐可笑。

表格单元格可以很好地处理垂直居中，并且可以向后兼容。它们还比浮动，相对/绝对定位或任何其他CSS类型方法更好地处理并排内容。

乔尔创造了（或至少普及了）“不要让建筑宇航员吓到你”一词中的“建筑师宇航员” 。同样，我认为“ CSS宇航员”（或“ CSS太空少年”）一词同样适用。

CSS是一个非常有用的工具，但是它也有一些严重的局限性。我最喜欢的编号列表可能只显示为“ 3”。但不是“ 3）”或“（3）”（至少在CSS3生成的内容之前-
还是CSS2.1？这两种方式均未得到广泛支持）。真是个疏忽。

但更大的是垂直居中和并排布局。对于纯CSS而言，这两个领域仍然是一个巨大的问题。另一位张贴者认为，相对定位加上负边距高度是必经之路。有什么比以下更好的了：

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    #outer { height: 200px; border: 1px solid black; width: 600px; background-color: #DDD; }
    #inner { width: 150px;  border: 1px solid red; background: yellow; margin: auto; line-height: 100%;  }
  </style>
</head>
<body>
<table>
<tr>
<td id="outer">
  <div id="inner">Inner</div>
</td>
</tr>
</table>
</body>
</html>

它将随时随地工作。

这是有关CSS垂直居中的文章。为了实现类似的目的，他们使用三个具有相对+绝对+相对定位的 嵌套div 来获得垂直居中
。我很抱歉，但是无论谁写这封信-以及任何认为那是个好主意的人-都只是丢掉了情节。

在Tables vs CSS中提出了一个反驳：CSSTrollsbegone。证明确实在布丁里。前20个（Alexa）网站中的绝大多数仍使用表格进行布局。 有充分的理由。

因此，请自己决定：您是否要让您的网站正常工作，并花费更少的时间使它正常工作？还是您想成为CSS宇航员？

2020-05-16