如何修复 flexbox 不完全居中？

Question

所以我正在尝试制作一种具有某些 UI 的窗格，例如登录页面。但是我有如下问题。

在这张照片中，我有完美的顶部元素，但测试元素不会居中，元素不会正确对齐。我该如何解决这个问题，使其居中？

顶栏的class是panelHeader 未对齐的 class 是 panelContent 整个面板 class 是面板

CSS:

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,100;1,400&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: 'Lato', sans-serif;
}

main {
    background: linear-gradient(to left top, rgba(87, 171, 235, 0.6), rgba(87, 171, 235, 0.9));
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel {
    background: linear-gradient(to right bottom, rgba(255,255,255,0.8), rgba(255,255,255, 0.3));
    min-height: 90vh;
    width: 95%;
    background: linear-gradient(to right bottom, rgba(255,255,255,0.7), rgba(255,255,255, 0.3));
    border-radius: 2rem;
    z-index: 2;
    backdrop-filter: blur(2rem);
    display: flex;
    justify-content: center;
}


.panelHeader {
    display: flex;
    justify-content: center;
    font-size: 40px;
    padding-top: 20px;
    animation: 0.45s ease-in 0s 1 slideInTop;
}

.panelContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes slideInTop {
    0% {
      transform: translateY(-20%);
    }
    100% {
      transform: translateY(0);
    }
  }

谢谢！

编辑

有人问我 HTML 所以这里:


<!DOCTYPE html>
<html>
    <head>
        <title>Tyler TV: Streaming</title>
        <link rel="stylesheet" href="styles.css" />
    </head>

    <body>
        <main>
            <section class="panel">
                <div class="panelHeader">
                    <h1>Tyler TV.  Stream Today, Watch Tommorow.</h1>
                </div>
                <div class="panelContent">
                    <h1>test</h1>
                </div>
            </section>
        </main>

        
    </body>
</html>

Answer 1

您添加了 display flex 以使用 nowrap 选项包装容器。

您需要添加到 .panel { flex-wrap: wrap; } 选项，或 { flex-direction: column; }

Answer 2

默认情况下，弹性框设置为 flex-direction: row，您需要将主 .panel 设置为列，

.panel {
    background: linear-gradient(to right bottom, rgba(255,255,255,0.8), rgba(255,255,255, 0.3));
    min-height: 90vh;
    width: 95%;
    background: linear-gradient(to right bottom, rgba(255,255,255,0.7), rgba(255,255,255, 0.3));
    border-radius: 2rem;
    z-index: 2;
    backdrop-filter: blur(2rem);
    display: flex;
    justify-content: center;
    flex-direction: column;
}

如果不需要垂直对齐，请从 .panel 中删除 justify-content: center

如何修复 flexbox 不完全居中？

How do I fix flexbox not completely centering?

html

css

alignment

flexbox