How to center div objects vertically and horizontally

Question

So I have the following in my page:

and I'm trying to get both squares to be in the center of the outer div so i would get something like:

It's basically getting them centered vertically and horizontally, like in a flexbox where i can "justify-content:center" and "align-item:center".

How do i achieve something similar in this case?

html, body {
    height: 100%;
}

#outer {
    height: 20%;
    width: 30%;
    border: 1px solid black;
}

#sq1 {
    border: 1px solid black;
    height: 30%;
    width: 10%;
    background-color: blue;
}

#sq2 {
    border: 1px solid black;
    height: 30%;
    width: 10%;
    background-color: green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>
    <div id = "outer">
        <div id = "sq1"></div>
        <div id = "sq2"></div>
    </div>
</body>
</html>

score 2 · Accepted Answer · edited Nov 08 '20 at 07:06

Use css flexbox, using justify-content and align-items where appropriate.

It's often recommended that when dealing with alignment in two directions css grid is more appropriate, but for something this basic, flexbox should be fine. If it gets more complex check out grid.

html,
body {
  height: 100%;
}

#outer {
  height: 40%;
  width: 40%;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#sq1 {
  border: 1px solid black;
  height: 20%;
  width: 20%;
  background-color: blue;
  margin-bottom: 1px;
}

#sq2 {
  border: 1px solid black;
  height: 20%;
  width: 20%;
  background-color: green;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div id="outer">
    <div id="sq1"></div>
    <div id="sq2"></div>
  </div>
</body>

</html>

score -2 · Answer 2 · answered Nov 08 '20 at 06:16

You can use these codes:

html, body {
    height: 100%;
  
}

#outer {
    height: 20%;
    width: 30%;
    border: 1px solid black;
   display: flex;
   flex-direction: column;
   justify-content: center;}

#sq1 {
    border: 1px solid black;
    height: 30%;
    width: 10%;
    background-color: blue;
    margin:0 auto 1px auto;
}

#sq2 {
    border: 1px solid black;
    height: 30%;
    width: 10%;
    background-color: green;
    margin:0 auto;

}

score -2 · Answer 3 · answered Nov 08 '20 at 06:19

You can adjust the margin-top based on your needed.

html, body {
    height: 100%;
}

#outer {
    height: 20%;
    width: 30%;
    border: 1px solid black;
}

#sq1 {
    border: 1px solid black;
    height: 30%;
    width: 10%;
    background-color: blue;
    margin: auto;
    margin-top: 3%;
}

#sq2 {
    border: 1px solid black;
    height: 30%;
    width: 10%;
    background-color: green;
margin: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>
    <div id = "outer">
        <div id = "sq1"></div>
        <div id = "sq2"></div>
    </div>
</body>
</html>

How to center div objects vertically and horizontally

3 Answers3