Question

我正在尝试为页面创建一个侧栏，并希望将一个部分垂直居中于另一个部分。我试过的片段如下。即使页面调整大小，我希望徽标部分保留在中心。包含徽标的部分位于虚线边框中。我希望整个部分即使在调整大小时也位于侧边栏的中心。

body{
  box-sizing: border-box;
}        
.sidebar {
            background-color: gray;
            opacity: 0.5%;
            position: fixed;
            right: 0;
            top: 0;
            height: 100%;
            width: 100px;
            border: 1px solid black;
            border-right: 0px;
            border-top: 0px;
            vertical-align: center;
            text-align: center;
            box-sizing: border-box;
        }
        
        .sidebar_logo_sec{
            margin-top:50%;
            padding-top:15px;
            padding-bottom:15px;
            height: 200px;
            width: 100px;
            vertical-align: center;
            text-align: center;
            border:1px dashed black;
        }

        .sidebarLogo {
            height: 52px;
            width: 52px;
            border-radius: 50%;
            border: 2px solid #424242;
            margin-bottom: 40px;
            text-align: center;
        }

<body>
    <section class="sidebar">
        <article class="sidebar_logo_sec">
            <section>
                <div>
                    <img class="sidebarLogo" src="github.svg" alt="github">
                </div>
            </section>
            <section>
                <div><img class="sidebarLogo" src="linkedin.svg" alt="linked in"></div>
            </section>
        </article>
    </section>
</body>

Answer 1

看起来像一个完美的use case for flexbox。

如果您将这些添加到侧边栏的现有属性中：

{{1}}

你应该让虚线部分垂直居中。

Fiddle here

Answer 2

由于您的.sidebar位置固定，请尝试删除top: 0和right: 0并替换为：

.sidebar {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

CSS垂直居中的部分或侧边栏

2 个答案: