odin-flex/01-flex-center/solution/solution.css

29 lines
605 B
CSS

.container {
background: dodgerblue;
border: 4px solid midnightblue;
width: 400px;
height: 300px;
}
.box {
background: palevioletred;
font-weight: bold;
text-align: center;
border: 6px solid maroon;
width: 80px;
height: 80px;
}
/* SOLUTION */
/* disclaimer: duplicating the `.container` selector here isn't best practice.
In your solution you probably put it right inside the existing `.container`,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.container {
display: flex;
align-items: center;
justify-content: center;
}