Self-taught: trying to center a textbox in the middle of the page by creating a div and using flex. It's currently centered at the top of the page

Question

.align {
  background: white;
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: 60%;
}

<div class="align">
  <p> This is filler text for a pretend blog </p>
</div>

Do I just add a bunch of padding to the top of the body? It does the trick but feels clunky and doesn't explain why flex isn't working.

Does this answer your question? [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — Sean, Mar 10 '22 at 01:01

Yadab · Answer 1 · 2022-03-10T10:40:50.993

0

You need to set the height of the page and use justify-content: center; and align-items: center;

body {
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

<div class="align">
  <p> This is filler text for a pretend blog </p>
</div>

edited Mar 10 '22 at 10:40

answered Mar 10 '22 at 01:01

Yadab

1,767
1
10
16

Thanks! This was helpful to center the text but I'm trying to center the box that the text is within as well if that makes sense. – Rybbread Mar 10 '22 at 01:14
If you need to center the box then just apply the same styles to the parent element of the box. I have updated my answer above. – Yadab Mar 10 '22 at 10:41

score 0 · Answer 2 · answered Mar 10 '22 at 01:03

The p element is at the vertical center of the .align element. This is not equal to being at the vertical center of the page. To make the p element be at the vertical center of the page, the .align element has to take up the whole height of the page. This could be done by applying height: 100vh to the .align element.

(If you want to horizontally center the p element, you have to apply justify-content: center to the .align element.)

(If the .align element is just for alignment, it could make sense to just remove it and simply apply

  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;

to the body:)

body {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

<p>This is filler text for a pretend blog </p>

Thanks for your help! I'm trying to center both the p element and the div element. It should look like a text box in the center of the page. — Rybbread, Mar 10 '22 at 01:15

score 0 · Answer 3 · answered Mar 10 '22 at 01:04

CSS Grid makes the process pretty painless.

/* remove default margin provided by browser user agent */
html {
  margin: 0;
}

/* remove default top margin for exact vertical centering */
.align p {
  margin-top: 0;
}

.align {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

<div class="align">
  <p> This is filler text for a pretend blog </p>
</div>

Arman Ebrahimi · Answer 4 · 2022-03-10T06:37:39.420

0

.align {
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  height: 50vh;
  border: solid green 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

<div class="align">
  <p> This is filler text for a pretend blog </p>
</div>

edited Mar 10 '22 at 06:37

answered Mar 10 '22 at 06:31

Arman Ebrahimi

2,035
2
7
20

Self-taught: trying to center a textbox in the middle of the page by creating a div and using flex. It's currently centered at the top of the page

4 Answers4