Vertically center a div element using CSS

Last Updated On Tuesday 26th Apr 2022

Center Vertically CSS

Vertically Center Using Flex

  • Flexbox have really great alignment properties.
  • We might use justify-content or align-items to adjust as needed on the parent Container.
	<div class="vertical-horizontal-center-element">
  Vertically Center Element Inside a Fixed Size Div
</div>
<div class="vertical-horizontal-center-element-with-margin">
  <div class="child">Vertically Center Element With Margins</div>
</div>
	

Centering Vertically CSS

	.vertical-horizontal-center-element {
  display: flex;
  /* justify-content will align it horizontally */
  justify-content: center;
  /* align-items will align it vertically */
  align-items: center;
  height: 50vh;
}
	

Centered Vertically

  • Applying margin: auto on a flex child item.
	.vertical-horizontal-center-element-with-margin {
  display: flex;
  height: 50vh;
}
.vertical-horizontal-center-element-with-margin .child {
  margin: auto;
}
	

Center Vertically in Div

Vertically Center Using Grid

  • CSS grid includes pretty much the same alignment options as Flexbox.
  • We might use justify-content or align-items to adjust as needed on the parent Container.
	<div class="grid">
  <p>Centered Using Grid</p>
</div>
<div class="grid-short">
  <p>Centered Using Grid Place Items</p>
</div>
<div class="grid-margin">
  <div class="grid-margin-child">Centered Using Grid and Margins</div>
</div>
	
	.grid {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 50vh;
}
	

css align vertically center

With Shorthand place-items

  • Using place-items which is short hand for align-items and justify-items
	.grid-short {
  display: grid;
  place-items: center;
  height: 50vh;
}
	

Using margin with Grid

  • Applying margin: auto on a grid item centers it on both axes.
	.grid-margin {
  display: grid;
  height: 50vh;
}

.grid-margin-child {
  margin: auto;
}
	

CSS Vertical Center

Centering with tables

  • Old way was to use display:table and set its child to display:table-cell and set it to vertical-align:middle.
  • A really simple approach , it is using the behavior of table-cell and vertical-align to center an element on a container.
	<div class="usingTable">
  <h1>Centered</h1>
</div>
	
	.usingTable {
  display: table;
  height: 50vh;
  width: 100%;
  text-align: center;
}
.usingTable h1 {
  display: table-cell;
  vertical-align: middle;
}
	

CSS Center Vertically

Vertically Center Using relative absolute Position

  • This is the one to go for me , with for simple ones.
  • absolute positioning the child at 50% percent from the top of their parent, we can then translate it up 50% percent of its height.
	<div class="parent">
  <p class="child">Centered Using Relative-Absolute Positioning</p>
</div>
	
	.parent {
  position: relative;
  height: 50vh;
}

.child {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
}
	
	.parent {
  position: relative;
  height: 50vh;
}
.child {
  width: fit-content;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: fit-content;
}