5 Ways to Center Align in CSS

banner

I will show you 5 different ways to center align an element vertically and horizontally within its parent element. Below is our HTML markup. Our goal is to center align child-box within box.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <div class="box">
        <div class="child-box"></div>
      </div>
    </div>
  </body>

  <style type="text/css">
    body {
      background: #051221;
    }
  </style>
</html>

fixedWidthHeight

Final result

1. Absolute positioning + negative margin

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #564787;
  position: relative;
}

.child-box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #da4267;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

2. Absolute positioning + transform

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #564787;
  position: relative;
}

.child-box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #da4267;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

3. Auto margin

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #564787;
  position: relative;
}

.child-box {
  width: 100px;
  height: 100px;
  margin: 25% 25%;
  /* or equivalently: */
  /* margin: 25% auto; */
  /* margin: auto auto; does NOT work */
  /* because if `margin-top` or `margin-bottom` is `auto`, */
  /* their used value is 0 */
  background: #da4267;
}

4. Flexbox

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #564787;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child-box {
  width: 100px;
  height: 100px;
  background: #da4267;
}

5. Grid

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #564787;
  display: grid;
}

.child-box {
  margin: auto;
  width: 100px;
  height: 100px;
  background: #da4267;
}

See a typo? Edit post on GitHub
Categories:
Is SSR Really the Only Solution?Elegant Developer Experience with Zsh and iTerm2