how to center a div using a div container?

Question

As the title states i am simply trying to center the red div. Initially i tried to use a the single red div as a parent to center it vertically and horizontally but no luck, after a few google searches i had seen that i need a parent div(green) in order to do this. i really suck at css and really just go through trial and error with it.

i'm struggling to simply center the child red div with 3 child elements, the h1 , h3 and button using the green 'container' div

where i'm at

enter image description here

css

body {
  background: #F5F7FB;
}

.container {
  display: flex;
  width: 100%;
  height: 200px;
  border: 1px solid green;
  
 

}

.container > div {
  margin: auto;
  text-align: center;
  border: 1px solid red;
}

Please add a [mcve] and explain better what do you want to achieve — Sfili_81, Mar 03 '22 at 15:03
the red div is actually centered in the outer container. The space between the title and the top edge is due to the default margin applied to the — Fabrizio Calderan, Mar 03 '22 at 15:05

score -1 · Answer 1 · answered Mar 03 '22 at 15:06

If you want to center any element, the best way to do that is by using flexbox properties.

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

For more details you can check w3school guide for using flexbox https://www.w3schools.com/css/css3_flexbox_container.asp

how to center a div using a div container?

1 Answers1