How to position a table at the center of a div horizontally & vertically

html

responsive-design

css

centering

byNikita Barsukov·Nov 24, 2024

Center a table both horizontally and vertically within a div using CSS Flexbox. Set the div to display: flex;, then use justify-content: center; and align-items: center; for perfect centering. Ensure the div has a defined height. Here's the essential code:

.centered-div {
  display: flex; /* Turns the div into a playground for the Flexbox */
  justify-content: center; /* Puts children in time-out in the center */
  align-items: center; /* Same as above, but for vertical axis */
  height: 100px; /* Don't skip leg day, give it a height! */
}

<div class="centered-div">
  <table> <!-- Your table rows and cells go here -->
  </table>
</div>

Going old school: Margin auto

For horizontal centering only, consider the veteran margin: auto;. This technique works well when flexbox feels too contemporary:

.centered-table {
  margin-left: auto; /* A left-side ticket to the center*/
  margin-right: auto; /* Balancing it out from the right-side */
}

<div>
  <table class="centered-table">
    <!-- Keep your table tidied, rows and cells here -->
  </table>
</div>

Centering with position and transform

CSS positioning combined with transform makes for a dynamic duo in centering, particularly for those not on the flexbox train:

.centered-div {
  position: relative; /* acting like a wall for the position "absolute" */
  height: 200px; /* Please define your desired height */
}

.centered-table {
  position: absolute; /* Top and Left values will refer to the parent element */
  top: 50%; /* 50% down from the top of the wall */
  left: 50%; /* 50% in from the left of the wall */
  transform: translate(-50%, -50%); /* The table tried to escape, we dragged it back */
}

Flexing on different screens

Take advantage of responsive designs using percentages. This strategy ensures your table stays in its lane, no matter the screen size:

.centered-div {
  display: flex; /* Flexin' on'em */
  justify-content: center; /* More flexin' horizontally */
  align-items: center; /* Flexin' vertically */
  height: 50vh; /* use viewport height to be a giant everywhere */
}

.centered-table {
  width: 50%; /* Taking up only half the screen */
  /* Don't forget to stay responsive! */
}

Ensuring cross-browser compatibility

Not all browsers attend the same party. Some CSS properties might be exclusive only to the cool kids. Use vendor prefixes to ensure everyone's invited:

.centered-div {
  display: -webkit-box; /* Old iOS sends its regards */
  display: -ms-flexbox; /* Because IE 10 wants to join the party */
  display: flex; /* Back to the future */
  justify-content: center;
  align-items: center;
}

Always check how CSS properties perform on different browsers!

Centering a background image

Want to center a background image within a div? Easy peasy:

div {
  background: url('your-image.jpg') no-repeat center center; /* The image wants to be in the center of attention */
  background-size: cover; /* Stretch or shrink the image up to your preference */
}

Inline-block alignment

Representing the traditionalists, the inline-block technique uses text-align: center; for horizontal alignment on a parent div, and vertical-align: middle; for vertical alignment:

.centered-div {
  text-align: center; /* Text follows musical chairs rules! */
  height: 200px; /* There must be "vertical" in vertical alignment */
  line-height: 200px; /* Welcome to the height club! */
}

.centered-table {
  display: inline-block; /* We are all blocks here, but a little in-line */
  vertical-align: middle; /* Lifts the element to the middle */
}