How to center an element in a Flexbox to the center of the page?

Question

I've been trying to figure out how to center an element within a Flexbox to the center of the page but I'm not sure how or if it can be done in a non-janky way. I've tried using absolute/relative positioning to move the elements into place but they never line up completely. I've have thought about using a grid and have the flex box element span the center columns but this seemed too janky as the number and size of the grid cells may not always be the same as the element I want to center.

Below, I have created an example to demonstrate my problem. I am looking to center the right-most element in the Flexbox to the center of the page so that the blue box is at the center of the page and the red one is still to the left of it.

.title {
  text-align: center;
  font-weight: bold;
  font-size: 40;
}

.box {
  display: flex;
  margin: auto;
  justify-content: center;
}

<html>
    <div class="title">
        Test Title
    </div>
    <div class="box">
        <div style="background-color: red; padding: 1rem;">Left Item</div>
        <div style="background-color: blue; padding: 1rem;">Right item</div>
    </div>
</html>

Edit: I have created a mock up image what I want to achieve using the example I provided. Sorry, if I wasn't able to explain exactly want I wanted before.

Does this answer your question? [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — Pisoj, Aug 01 '23 at 08:08
Unfortunately it does not. I am not trying to center both elements in the flex box; I just want the right-most element to be aligned to the center of the page while the left-most element stays to the left of the centered element. — DaBaby, Aug 01 '23 at 08:25
"*[This] seemed too janky as the number and size of the grid cells may not always be the same as the element I want to center*" - can you show a couple more possibilities, and how they should be arranged? Some idea of how general the solution has to be (or how constrained/open the requirements are) would be useful to create better answers. — David Thomas, Aug 01 '23 at 09:04
Will the widths of the left and right items vary? With a fixed width, this can be done using the `translate` property. — Tim R, Aug 01 '23 at 09:31

score 0 · Answer 1 · answered Aug 01 '23 at 08:17

0

You can set flex-direction: column; and then give a height and a width for them.

.title {
  text-align: center;
  font-weight: bold;
  font-size: 40;
}

.box {
  display: flex;
  margin: auto;
  flex-direction: column;
  width: 200px;
}

<html>
<div class="title">
  Test Title
</div>
<div class="box">
  <div style="background-color: red; padding: 1rem;">Left Item</div>
  <div style="background-color: blue; padding: 1rem;">Right item</div>
</div>

</html>

answered Aug 01 '23 at 08:17

Dulan Jayawickrama

221
1
11

I wanted the elements in the same order as they were in my example; so the red box is on the left and blue box on the right. What I was asking was how would I align the blue box to the center of the page but keep the red box to the left of the blue box. – DaBaby Aug 01 '23 at 08:22

score 0 · Accepted Answer · answered Aug 01 '23 at 09:00

Use absolute positioning on the first div of the flex container and make it stick to the left by using left propety and settin its vlue to 0. Also, it's really important that you set position to relative on the element you want its children absolutly positioned to, otherwise they will be psositioned absolutly to the body.

.title {
  text-align: center;
  font-weight: bold;
  font-size: 40;
}

.box {
  position: relative;
  display: flex;
  margin: auto;
  justify-content: center;
}

.box > div:first-child {
    position: absolute;
    left: 0;
}

<html>
<div class="title">
  Test Title
</div>
<div class="box">
  <div style="background-color: red; padding: 1rem;">Left Item</div>
  <div style="background-color: blue; padding: 1rem;">Right item</div>
</div>

</html>

score 0 · Answer 3 · answered Aug 01 '23 at 09:44

I think the proper way to solve your problem with flexbox is creating another block with visibility: hidden and leverage the justify-content: space-between of flex box.

My example code:

html:

<body>
    <div class="title">Test Title</div>
    <div class="box">
      <div class="item" style="background-color: red; padding: 1rem">
        Left Item
      </div>
      <div class="item" style="background-color: yellow; padding: 1rem">
        Middle
      </div>
      <div class="item" style="background-color: blue; padding: 1rem">
        Right item
      </div>
    </div>
  </body>

css:

.title {
  text-align: center;
  font-weight: bold;
  font-size: 40;
}

.box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  width: 100vw;
}

.item {
  height: 50px;
  width: 50px;
}

.item:nth-child(3) {
  visibility: hidden;
}

score 0 · Answer 4 · answered Aug 01 '23 at 09:47

0

This is your css:

.box {
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  height: 400px; /* Any Value */
}

answered Aug 01 '23 at 09:47

Kannu Mandora

479
2
10

How to center an element in a Flexbox to the center of the page?

4 Answers4