Often there is a need to center a certain part of our content and in this tutorial we show you how to do it using several CSS methods:

Content hide
1 Method 1: Using flex.
2 Method 2: Using grid.
3 Method 3. Using Bootstrap 5.
4 Method 4: Using margin: auto

Method 1: Using flex.

The first method for centering content in CSS is by using the display: flex property. This property allows us to create a flexible container that can align and distribute space between child elements. To center both vertically and horizontally an element, we can use the justify-content: center and align-items: center properties.

Example:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .centered {
      background-color: lightblue;
      padding: 20px;
    }
  </style>
  <title>Centering content with CSS</title>
</head>
<body>
  <div class="container">
    <div class="centered">
      Centered Content
    </div>
  </div>
</body>
</html>

Method 2: Using grid.

Another method to center content in CSS is using the display: grid property. The grid system allows us to create complex layouts by dividing the container into rows and columns. To center an element both vertically and horizontally, we can use the place-items: center and place-content: center properties.

Example:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: grid;
      place-items: center;
      place-content: center;
      height: 100vh;
    }

    .centered {
      background-color: lightblue;
      padding: 20px;
    }
  </style>
  <title>Centering content with CSS</title>
</head>
<body>
  <div class="container">
    <div class="centered">
      Centered Content
    </div>
  </div>
</body>
</html>

Method 3. Using Bootstrap 5.

Bootstrap 5 is a popular CSS framework that allows us to create responsive layouts easily. To center content in Bootstrap 5, we can use the d-flex, justify-content-center, and align-items-center classes.

Example:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="bootstrap.min.css" rel="stylesheet">
  <title>Centering content with Bootstrap 5</title>
</head>
<body>
  <div class="contenedor d-flex justify-content-center align-items-center" style="height: 100vh;">
    <div class="centrado" style="background-color: lightblue; padding: 20px;">
      Centered Content
    </div>
  </div>
</body>
</html>

Method 4: Using margin: auto

We go to our HTML code and define what will go centered as follows:

<div id=“container”>
<p>Here can go any type of content, images, text and whatever else we want</p>
</div>

Inside our style sheet or CSS section we define the id “container” as follows

<style type="text/css">
body{text-align:center;}
#container{margin: 0px auto;}
</style>

The auto property in the container is who performs the work of centering, but in IE 6.0 and earlier does not recognize this property so we do a little hack and in the body we define a center-aligned text, which ends up centering the entire contents of our container.

I hope you find it useful 🙂