【HTML中垂直居中】【容器】使用table中的vertical
2018-11-02 本文已影响1人
fanlehai
- 使用table中的vertical-align属性,把div当成table:
- cell的子元素都会垂直居中；
<html>
<head>
<style type="text/css">
#wrapper {
display: table;
height: 100px;
background-color: rgb(87, 87, 92);
}
#cell {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>
</body>
</html>
- 【优点】
content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断
- 【缺点】
Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)
