css---父元素高度不确定，如何通过css样式垂直居中

最新推荐文章于 2023-02-15 23:09:33 发布

原创最新推荐文章于 2023-02-15 23:09:33 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用CSS使右侧元素根据左侧列表数量变化自适应垂直居中的方法。通过设置绝对定位及50%顶部偏移量配合10px负外边距，即使左侧列表项数量不确定也能确保右侧内容始终居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例代码：

<div id='box'>
    <section class='boxLeft'>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </section>
    <section class='boxRight'>
        列表
    </section>
</div>

如上：boxLeft中li的个数不确定，如何使boxRight自适应上下居中？
css样式代码：

#box{position:relative}
.boxLeft{padding:20px 0;}
.boxLeft li{
    height:20px;
}
.boxRight{
    position:absolute;
    right:0;
    height:20px;
    line-height:20px;
    top:50%;
    margin-top:-10px;
}