How can I horizontally center text in a flexbox box?

Question

CSS Code:

    .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 400px;
}
.box1 {
  background-color: aliceblue;
  height: 70%;
  width: 70%;
}

I tried vertical-align to center in box1 and nothing happened either. My box with the current code has vertically centered text but not horizontally. Any tips?

`.box1 { background-color: aliceblue; height: 70%; width: 70%; }` is not a flex box and has a specific height without any display reset , let us guess,, your text stands in it ... display:table-cell and vertical-align can work together for inner content. — G-Cyrillus, Sep 11 '21 at 19:00

score 0 · Answer 1 · answered Sep 11 '21 at 19:01

You can nest flex containers. This means your box can also have the display: flex; property, plus justify-content: center; for horizontally centering. Also look into the "place-" property with which you can center things on both axes with one single line of CSS.

How can I horizontally center text in a flexbox box?

1 Answers1