[David Hoang]

If you want to center an element horizontally you can do like this:

1. Method one: Using flexbox.

#outer{
    display: flex;
    justify-content: center;
}

If you want to align vertically center as well, just add align-items: center;. For this to work you need to give a certain height to the #outer.

#outer{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
}

2. Method 2: Using margin.
For this method to work you need to give your #inner a certain width.

#inner {
  width: 50%;
  margin: 0 auto;
}

3. Method 3: Using (margin + translate). For this to work you need to give certain width to #inner.

#inner {
  width: 50%;
  margin-left: 50%;
  transform: translateX(-50%);
}

[Author]

Posts