table-cell实现大小不固定元素的垂直居中

最新推荐文章于 2023-10-05 18:29:42 发布

原创最新推荐文章于 2023-10-05 18:29:42 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

11 篇文章

订阅专栏

使用table-cell实现元素的垂直居中，即使内容长度变化也能保持效果。父元素需设定宽高、display: table，子元素设定display: table-cell和vertical-align: middle。

代码实例：

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <meta charset="utf-8">
    <style type="text/css">
        .container{
          display: table;
          width: 300px;
          height: 200px;
          background-color: #ddd;
        }
        .container .item{
          display: table-cell;
          vertical-align: middle;
          padding: 0 20px;
        }
    </style>
</head>
<body>
 <div class="container">
    <div class="item">无限长度的元素，此元素长度如果超过设定的width值，会自动换行</div>
 </div>
</body>
</html>