CSS Center Everything

In web development, we often encounter situations where we need to center elements within their parent container. In this guide, we will cover various techniques to center everything using CSS.

Centering Elements Horizontally

Using text-align

One of the easiest ways to center an element horizontally is to set its text-align property to center. This works for inline elements and their parent containers.

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

Using margin: auto

Another way to center elements horizontally is to set their margin property to auto. This works for block-level elements and their parent containers.

.parent {
  width: 50%;
}

.child {
  width: 80%;
  margin: 0 auto;
}

Using flexbox

Flexbox provides a powerful way to center elements both horizontally and vertically. We can use the justify-content and align-items properties to center our elements.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 50%;
  height: 50%;
}

Centering Elements Vertically

Using line-height

We can center single-line text elements vertically by setting their parent container's line-height property to be equal to its height.

.parent {
  height: 100px;
  line-height: 100px;
}

.child {
  display: inline-block;
}

Using transform

We can use the transform property to center elements vertically even if we don't know their height. We need to set the top and left properties to 50% and then use transform: translate(-50%, -50%) to center the element.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Using flexbox

As mentioned earlier, we can use flexbox to center elements vertically as well. We need to set the flex-direction property to column and use the justify-content and align-items properties to center our elements.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.child {
  width: 50%;
  height: 50%;
}

Centering Elements Both Horizontally and Vertically

Using transform

We can use the transform property to center elements both horizontally and vertically. We need to set the top and left properties to 50%, and use transform: translate(-50%, -50%) to center the element.

.parent {
  position: relative;
  height: 400px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Using flexbox

Flexbox provides the simplest way to center elements both horizontally and vertically. We need to set the display property to flex, and use the justify-content and align-items properties to center our elements.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.child {
  width: 50%;
  height: 50%;
}

These are some of the techniques you can use to center elements using CSS. Choose the one that best suits your needs and make your website more visually appealing.