How to Center a DIV Element in 10 Ways?

Web developers often face the challenge of centring a <div> element on a webpage, which can be a time-consuming and frustrating task. In this blog, we present ten different ways to centre a <div> horizontally and vertically, accompanied by their respective code and explanations. Whether you’re a beginner or an experienced developer, you can choose the method that best suits your needs and integrate it into your codebase. By exploring these techniques, you’ll gain valuable insights and have a variety of solutions at your disposal to effortlessly centre <div> elements in your web projects. Let’s dive in and conquer the centring challenge!

Method 1: Using CSS Flexbox

This method utilises CSS flexbox, a powerful layout system. By setting the container’s display property to flex and applying justify-content: center and align-items: center, the child <div> is centred both horizontally and vertically within the container.

<div class="container">
  <div class="centered-div">Content goes here</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.centered-div {
  /* Additional styles for the centered div */
}

Method 2: Using CSS Grid

CSS grid is another layout system that provides a straightforward way to centre elements. By setting the container’s display property to grid and applying place-items: center, the child <div> is centred both horizontally and vertically within the container.

<div class="container">
  <div class="centered-div">Content goes here</div>
</div>

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

.centered-div {
  /* Additional styles for the centred div */
}

Method 3: Using Absolute Positioning

This method involves absolute positioning. By setting the container’s position property to relative and the child <div>’s position property to absolute, along with appropriate top, left, and transform properties, the <div> is centred both horizontally and vertically within the container.

<div class="container">
  <div class="centered-div">Content goes here</div>
</div>

.container {
  position: relative;
  height: 100vh;
}

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Additional styles for the centred div */
}

Method 4: Using Margin Auto

This approach leverages the margin: auto property. By setting the margin of the child <div> to auto, the browser automatically calculates equal margins on the left and right, which centres the <div> horizontally within the container.

<div class="container">
  <div class="centered-div">Content goes here</div>
</div>

.container {
  height: 100vh;
}

.centered-div {
  margin: auto;
  /* Additional styles for the centred div */
}

Method 5: Using Flexbox and Margin Auto

Similar to method 4, this method combines the use of margin: auto with a flex container. By applying display: flex to the container and setting the margin of the child <div> to auto, the <div> is centred both horizontally and vertically within the container.

<div class="container">
  <div class="centered-div">Content goes here</div>
</div>

.container {
  display: flex;
  height: 100vh;
}

.centered-div {
  margin: auto;
  /* Additional styles for the centred div */
}

Method 6: Using Text-Align and Line-Height

By setting the container’s text-align property to center and the line-height property to match the container’s height, the child <div> can be centred vertically within the container. The display: inline-block ensures that the <div> behaves as a block element and centres it horizontally.

<div class="container">
  <div class="centered-div">Content goes here</div>
</div>

.container {
  text-align: center;
  height: 100vh;
  line-height: 100vh;
}

.centered-div {
  display: inline-block;
  /* Additional styles for the centred div */
}

Method 7: Using CSS Table Display

By using the table display properties, the container acts as a table, and the child <div> acts as a table cell. Setting text-align: center and vertical-align: middle on the child <div> horizontally and vertically centres it within the container.

<div class="container">
  <div class="centered-div">Content goes here</div>
</div>

.container {
  display: table;
  height: 100vh;
  width: 100%;
}

.centered-div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  /* Additional styles for the centred div */
}

Method 8: Using Transform and Absolute Positioning

Similar to method 3, this approach uses absolute positioning, but without a relative container. By setting the child <div>’s position to absolute, along with appropriate top, left, and transform properties, the <div> is centred both horizontally and vertically within the viewport.

<div class="container">
  <div class="centered-div">Content goes here</div>
</div>

.container {
  position: relative;
  height: 100vh;
}

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Additional styles for the centred div */
}

Method 9: Using Grid with Auto Margins

This method combines the use of CSS grid and auto margins. By applying display: grid to the container and setting the margin of the child <div> to auto, the <div> is centred both horizontally and vertically within the container.

<div class="container">
  <div class="centered-div">Content goes here</div>
</div>

.container {
  display: grid;
  height: 100vh;
}

.centered-div {
  margin: auto;
  /* Additional styles for the centred div */
}

Method 10: Using CSS Grid with Place Content

This approach utilises CSS grid’s place-content property. By setting place-content: center on the container, the child <div> is centred both horizontally and vertically within the container.

<div class="container">
  <div class="centered-div">Content goes here</div>
</div>

.container {
  display: grid;
  place-content: center;
  height: 100vh;
}

.centered-div {
  /* Additional styles for the centred div */
}

Conclusion

Centring a <div> can be achieved through various methods, each with its own set of advantages. By understanding these techniques, you can choose the most suitable approach based on your specific requirements. Experiment with these methods and combine them with additional styles to create beautifully centred <div> elements in your web projects. Follow TwoOrbits Blog to learn more about such new and exciting stuff.

Please leave this field empty

DON’T MISS A BEAT

Be the first to know when we add new features or post important stuffs!

We don’t spam! Read our privacy policy for more info.

Check your inbox or spam folder to confirm your subscription.

Mohit

I’m the cofounder of TwoOrbits.com and love to write about digital marketing, SEO, technology, DIY hacks and more. Share your feedbacks and suggestions via comment. Connect with me via LinkedIn and lets start an insightful conversation.

twoorbits.com