center div Archives - Lena Design

By using CSS you can centre text/ div in several ways. The most common ways to centre the div/ text is using:

To horizontally center an element:

To vertically center an element:

To center an element/ text vertically and horizontally:

How to horizontally center the element/ text?

The CSS text-align property defines the horizontal alignment of text in an element. To center text/ div in CSS, use the text-align property and set the value to “center.”

Example:

Align the heading center:

<!doctype html>
<html>
<head>
  <style>
     h3 {text-align: center;}
  </style>
</head>

<body>
    <h3>This is a heading.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum, justo et lacinia dapibus, libero libero laoreet metus, sit amet porttitor est orci in mi. Duis eu venenatis sapien, sit amet iaculis mi. Maecenas sit amet cursus enim. Sed tincidunt at nunc ut facilisis. Praesent a lectus metus. Etiam vehicula ante at rutrum ultrices.</p>
</body>
</html>

Output:

This is a heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum, justo et lacinia dapibus, libero libero laoreet metus, sit amet porttitor est orci in mi. Duis eu venenatis sapien, sit amet iaculis mi. Maecenas sit amet cursus enim. Sed tincidunt at nunc ut facilisis. Praesent a lectus metus. Etiam vehicula ante at rutrum ultrices.

2. CSS justify-content Property

The CSS justify-content property aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally).

Example:

<!doctype html>
<html>
<head>
  <style>

#flex-container {
  width:100%;
  display: flex;
  justify-content: center;
}
  </style>
</head>

<body>
    <div id="flex-container">
        <h3 class="flex-item">This is a heading.</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum, justo et lacinia dapibus, libero libero laoreet metus, sit amet porttitor est orci in mi. Duis eu venenatis sapien, sit amet iaculis mi. Maecenas sit amet cursus enim. Sed tincidunt at nunc ut facilisis. Praesent a lectus metus. Etiam vehicula ante at rutrum ultrices.</p>
</body>
</html>

Output:

This is a heading.

How to vertically center the element/ text?

1. CSS padding Property

To align an element/ text vertically use the CSS padding property and set the top and bottom values.

Example:

<!doctype html>
<html>
<head>
  <style>

      p {
          padding: 100px 0;
          background-color: lightblue;
      }
      
  </style>
</head>

<body>
    <p>This is a paragraph.</p>
    
</body>
</html>

Output:

This is a paragraph.

2. CSS align-items Property

The CSS align-items property defines the default alignment for items inside the flexible container.

Example:

<!doctype html>
<html>
<head>
  <style>

#flex-container-2 {
  height:200px;
  display: flex;
  align-items: center;
  background-color: lightblue;
}
  </style>
</head>

<body>
    <div id="flex-container-2">
        <p class="flex-item-2">This is a paragraph.</p>
</div>
</body>
</html>

Output:

This is a paragraph.

How to center an element/ text vertically and horizontally?

1. CSS justify-content Property & CSS align-items Property

To center an element/ text vertically and horizontally use the CSS justify-content property and align-items property (these properties will center the flexible container’s items).

Example:

<!doctype html>
<html>
<head>
  <style>

#flex-container-3 {
  height:200px;
  width:300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}
  </style>
</head>

<body>
    <div id="flex-container-3">
        <p class="flex-item-3">Hello World!</p>
</div>
</body>
</html>

Output:

Hello World!

2. CSS transform Property

Example:

<!doctype html>
<html>
<head>
  <style>
#example-1 {
  height:200px;
  width:300px;
  position: relative;
  background-color: lightblue;
}
.item {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  margin:0;
      }
  </style>
</head>

<body>
    <div id="example-1">
     <p class="item">Hello World!</p>
</div>
</body>
</html>

Output:

Hello World!

Enjoy coding!