How do I fix flexbox not completely centering?

Question

So I am attempting to make a sort of pane that has some UI, like a landing page. But I have a problem as follows.

In this picture, I have the top element which is perfect, but the test element wont center element wont align correctly. How can I fix this so its centered?

The top bar's class is panelHeader The unaligned class is panelContent the entire panel class is panel

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);
    }
  }

Thank you!

EDIT

Someone asked for my HTML so here:


<!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>

I just edited the original post – Mount Mario May 01 '22 at 13:43 — Mount Mario, May 01 '22 at 13:43

score 2 · Accepted Answer · answered May 01 '22 at 13:44

2

You added display flex to wrap container with nowrap options.

You need add to .panel { flex-wrap: wrap; } option, or { flex-direction: column; }

answered May 01 '22 at 13:44

Now my header is centered in the middle when it should be at the top – Mount Mario May 01 '22 at 13:46
https://jsfiddle.net/Ly6s3n7v/ – May 01 '22 at 13:47
add flex-grow 1 to panelContent like in example – May 01 '22 at 13:48
What does flex-grow do? I want to know for future uses. – Mount Mario May 01 '22 at 13:50
Remove `justify-content: center` from `.panel` if you don't need vertical alignment. As you have changed the direction `justify-content` will work for the vertical alignment instead of `align-items` – Piyush Pranjal May 01 '22 at 13:54

score 0 · Answer 2 · answered May 01 '22 at 13:51

by default the flex box is set to flex-direction: row, You need to set your main .panel to column,

.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;
}

Remove justify-content: center from .panel if you don't need vertical alignment

How do I fix flexbox not completely centering?

2 Answers2