0

I want to center 4 boxes at the center of a page, i.e., they should be vertically centered and horizontally, one box should be at extreme left, one at extreme right and the left ones should be placed horizontally between the extreme ones. I know that such a question have been asked before, but I am not getting the exact logic of the solution. Can someone please give a proper explanation for the same? Thanks a lot. Here's the HTML code-

.cards div{
    height: 200px;
    width: 200px;
    float: left;
    text-align: center;
    margin-left: 100px;
}
.card_1{
    background-color: green;
}
.card_2{
    background-color: blue;
}
.card_3{
    background-color: yellow;
}
.card_4{
    background-color: red;
}
<html>
    <head>
        <link rel="stylesheet" href="second.css">
    </head>
    <body>
        <div class="cards">
            <div class="card_1">
            </div>
            <div class="card_2">
            </div>
            <div class="card_3">
            </div>
            <div class="card_4">
            </div>
        </div>
    </body>
</html>
kravisingh
  • 1,640
  • 12
  • 16
Frosted Cupcake
  • 1,909
  • 2
  • 20
  • 42

1 Answers1

2

Here is a solution using flexbox:

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
.cards {
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.cards div {
    height: 200px;
    width: 200px;
}
.card_1 {
    background-color: green;
}
.card_2 {
    background-color: blue;
}
.card_3 {
    background-color: yellow;
}
.card_4 {
    background-color: red;
}

More information about flexbox:

Edit

The secret to this solution is 

align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;

display: flex; instructs the browser to use a flexbox layout when rendering your container element. flex-direction: row; renders all children of the container in a row. align-items: center; vertically centers the children of the container. And finally justify-content: space-between; spaces each child of the container with equal space in between each.

Flexbox is a powerful layout system. I would recommend learning more about it through SO or the provided links.

Keep in mind that flexbox is supported across all major browsers but IE 11 has limited support due to several bugs.

Joe Hawkins
  • 9,803
  • 2
  • 21
  • 28
  • 2
    What does that do? How does it answer the question? Don't just blurt out markup! https://stackoverflow.com/help/how-to-answer – Rob Aug 12 '17 at 02:23
  • @Rob Thanks for taking time to help improve the community. The link you included states "Any answer that gets the asker going in the right direction is helpful...". My links have context, including tutorials about how to use flexbox. I felt like my answer is helpful and points asker in the right direction. If you feel that there is a better way to answer this question, please provide an answer or make an edit to mine. I'd warmly welcome the community's help. – Joe Hawkins Aug 12 '17 at 02:49
  • 1
    Links go dead. If and when those links disappear, tomorrow or a few years from now, your post becomes a code post with no help whatsoever. Showing markup without explanation isn't helpful. SO is a community to teach and learn, not just a list of links – Rob Aug 12 '17 at 13:03
  • @Rob I added further explanations. Thanks for steering this answer in a better direction. – Joe Hawkins Aug 12 '17 at 17:01