HTML / CSS Is there a better/cleaner way to center horizontally and vertically in this example?

Question

I'm new to HTML/CSS and am making my first web page by myself. Currently working on the last CSS project for codecademy.

I've been fiddling with this for the longest time and just can't figure it out. I'm trying to center all my elements in the .mainContainer. I'm guessing 'Title' should be in the same container with the boxes, but I don't know how to make it appear above the boxes with everything centered (x and y).

Below is the closest I can get. It seems the bottom of the boxes is centered, but I need all the content centered. What I'm not understanding is why I have inline-block for .mainContainer, yet flex in .boxContainer. If I remove one, I lose the centering. I didn't think I could use multiple displays like that...what is going on there?

https://jsfiddle.net/ichristian/ce9mou4w/2/

HTML

<div class='mainContainer'>
  <h2>Title</h2>
  <div class='boxContainer'>
    <div class='box'>
      <p>Box 1</p>
    </div>
    <div class='box'>
      <p>Box 2</p>
    </div>
    <div class='box'>
      <p>Box 3</p>
    </div>
  </div>

</div>

CSS

.mainContainer{
    background-color: orange;
    height: 200px;
    width: 400px;
    align-items: center;
    text-align: center;
    display: inline-block;

}

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

.box {
  background-color: black;
  color: white;
  height: 40px;
  width: 40px;
}

.box + .box {
  margin-left: 40px;
}

EDIT: Did not like the solution from the recommended question. The answer I chose below is much easier.

Does this answer your question? [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — Heretic Monkey, Dec 27 '19 at 17:13

score 1 · Accepted Answer · answered Dec 27 '19 at 17:11

1

Four the outer container you could use a flex-direction set to column and for the inner container set to row.

.mainContainer {
  display: flex;
  align-items:center;
  justify-content: center;
  flex-direction: column;
  background-color: orange;
  height: 200px;
  width: 400px;
}

h2 {
  margin: 0 0 20px 0;
}

.boxContainer {
  display: inherit;
  flex-direction: row;
}

.box {
  background-color: black;
  color: white;
  height: 40px;
  width: 40px;
  margin: 0 20px;
}

<div class='mainContainer'>
  <h2>Title</h2>
  <div class='boxContainer'>
    <div class='box'>
      <p>Box 1</p>
    </div>
    <div class='box'>
      <p>Box 2</p>
    </div>
    <div class='box'>
      <p>Box 3</p>
    </div>
  </div>

</div>

The title and its sibling container can be eventually spaced using a margin (e.g. a margin-bottom on the <h2> element).

answered Dec 27 '19 at 17:11

Fabrizio Calderan

120,726
26
164
177

but this is not giving exactly vertically and horizontally centred – Avinash Dalvi Dec 27 '19 at 17:21
@aviboy2006 you need to take measurements from the bounding box: https://jsfiddle.net/s90t2vpj/ (~55px both from top and from bottom) – Fabrizio Calderan Dec 27 '19 at 17:24
not coming as exact center position. Output coming center inside container but not inside HTML body. – Avinash Dalvi Dec 27 '19 at 17:26
1

@aviboy2006 the OP question is : "_I'm trying to center all my elements in the .mainContainer_" there's no reference to the body – Fabrizio Calderan Dec 27 '19 at 17:28

Avinash Dalvi · Answer 2 · 2019-12-27T17:15:53.670

0

Do this :


.mainContainer {
  background-color: orange;
  height: 200px;
  width: 400px;
  align-items: center;
  text-align: center; 
  margin-left:auto;
  margin-right:auto; 

}

https://jsfiddle.net/aviboy2006/j7za04xu/2/ made small changes also.

Added larger width and height:

https://jsfiddle.net/aviboy2006/j7za04xu/5/

Exactly centred vertically and horizontally :


.mainContainer {
  background-color: orange;
  position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    padding:10px;
    text-align:center;

}

edited Dec 27 '19 at 17:15

answered Dec 27 '19 at 17:02

Avinash Dalvi

8,551
7
27
53

This definitely looks better, but is there a way to center 'Title' with the boxes? So if say, I came back to resize .mainContainer to a larger size, it would all remained center vertically? – Ian C. Dec 27 '19 at 17:09
Yes if you mainContainer width and height it will not impact title and boxes. You can try – Avinash Dalvi Dec 27 '19 at 17:10
I'm sorry, what I mean is, I want boxes and Title in the middle of mainContainer no matter what size it becomes. Not just centered, but in the exact middle. – Ian C. Dec 27 '19 at 17:13

HTML / CSS Is there a better/cleaner way to center horizontally and vertically in this example?

2 Answers2