Ads by ProfitSence

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>

					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%);