css垂直居中

前端之家收集整理的这篇文章主要介绍了css垂直居中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我如何可以垂直中心一个< div>在< div> ?

我的代码到目前为止:

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

我试过“顶:50%;”和“vertical-align:middle;”没有成功

编辑:好的,所以它被讨论了很多。和我可能开始另一个小火焰战争。但为了论证的缘故,我怎么会做一个表呢?我使用css的一切,迄今为止,所以它不像我不是试图雇佣“良好做法”。

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

解决方法

总之,你塞满了。更多关于这一点在最近的问题,我问 Can you do this HTML layout without using tables?基本上,CSS狂热者需要得到一个抓地力,意识到有一些事情你不能做(或不能做好)没有表。

这种反表歇斯底里是没有什么可笑的。

表格单元格处理垂直对中真的很好,并向后兼容,只要你可能关心。它们还处理并排内容方式比浮动,相对/绝对定位或任何其他CSS类型方法

乔尔在Don’t Let Architecture Astronauts Scare You创造(或至少普及)术语“建筑师宇航员”。同样,我认为术语“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>

这将工作无处不在,每一次。

这里是一个article on vertical centering in CSS.要实现类似的事情,他们使用三个嵌套的div与相对绝对的相对定位,只是为了获得垂直居中。我很抱歉,无论谁写的 – 任何人认为这是一个很好的死 – 简直失去了阴谋。

反驳在Tables vs CSS: CSS Trolls begone给出。证据确实在布丁。绝大多数前20名(Alexa)网站仍然使用表格进行布局。有很好的理由。

所以决定自己:你想要你的网站工作,花更少的时间让它工作?还是你想成为一名CSS宇航员?

猜你在找的CSS相关文章