'how to center a div using a div container? [duplicate]

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;
}
cssflexboxcentering


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ahad Aman

Related Questions