How to Center a Element with HTML and CSS ?

Last Updated On Sunday 10th Apr 2022
  • Set the display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center for horizontal centering
	<div class="wrapper">
  <span>I'm vertically/horizontally centered!</span>
</div>
	
	html, body, .container {
    height: 100%;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
	
  • Use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.
	.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}