Ads by ProfitSence
Close

How to Center a Element with HTML and CSS ?

Last Updated on Wednesday 5th Oct 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%);
}