实现不定高元素垂直居中三中方式

最新推荐文章于 2024-02-26 08:00:00 发布

捕鱼麦大叔

最新推荐文章于 2024-02-26 08:00:00 发布

阅读量448

点赞数

文章标签： css 垂直居中 position

本文链接：https://blog.csdn.net/weixin_41754739/article/details/79444153

版权

效果图如下：

html结构：

 <div class="parent">
        <div class="child">demo</div>
 </div>

方法一：display: table-cell + vertical-align: middle

具体样式：

 .parent {
     width: 60px;
     height: 200px;
     background: #ddd;
     display: table-cell;
     vertical-align: middle;
  }
  .child {
     width: 60px;
     background: #333;
     font-size: 22px;
     color: #fff;
  }

方法二： position：relative + transfrom: translateY

具体样式：

.parent {
            width: 60px;
            height: 200px;
            background: #ddd;
           position: relative;
        }
        .child {
            width: 60px;
            background: #333;
            font-size: 22px;
            color: #fff;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

方法三：display: flex + align-items: center

具体代码：

.parent {
            width: 60px;
            height: 200px;
            background: #ddd;
            display: flex;
            align-items: center;
        }
        .child {
            width: 60px;
            background: #333;
            font-size: 22px;
            color: #fff; 
        }