Align Center different HTML element with CSS

Centering any HTML element is always a difficult thing to do. Since there are many ways to align the HTML element to the center. Here I am going to tell you how to center different elements horizontally, vertically, and both vertically and horizontally.

How to Center Horizontally

Centering elements horizontally is easy as compared to centering vertically. Here I am going to tell you various ways by which you can align the HTML element Horizontally centered.

Align text horizontally centered with text-align center

index.html

<div class="main">
 <p>Hello "medium.com"</p>
</div>

style.css

p{
  text-align: center;
 }

Align Div horizontally center with CSS margin auto

<div class="parent">
  <div class="child"></div>
</div>
.parent{
  width: 400px;
  height: 100px;
  background: green
}
.child{
  width: 100px;
  height: 100px;
  background: blue;
  margin: auto;
}

Align Div horizontally center with Flexbox

.parent{
  width:400px;
  height:100px;
  background:green;
  display:flex;
  justify-content:center
}
.child{
  width:100px;
  height:100px;
  background:blue;
}

Align Div horizontally center with CSS absolute position and transform

Set position property of the parent element to relative. Now set the position property of the child element to absolute and left to 50%. This just centers the left corner of the child element horizontally. To center the child element perfectly, apply transform to translateX(-50%)

.parent{
  width:400px;
  height:100px;
  background:green;
  position:relative
}
.child{
  width:100px;
  height:100px;
  background:blue;
  position:absolute;
  left:50%;
  transform:translateX(-50%)
}

Align Div horizontally center with CSS absolute position and negative margin

Set position property of the parent element to relative. Now set the position property of the child element to absolute and left to 50%. This just centers the left corner of the child element horizontally. Here to center the child element, apply a negative left margin set to half the child element’s width.

.parent{
  width:400px;
  height:100px;
  background:green;
  position:relative
}
.child{
  width:100px;
  height:100px;
  background:blue;
  position:absolute;
  left:50%;
  margin-left:-50px;
}

How to center vertically

Centering element vertically is not as easy as centering horizontally. Here we are going to see different ways of doing so.

Align Div vertically center with CSS absolute position and negative margin

Set position property of the parent element to relative. Now set the position property of the child element to absolute and top to 50%. This just centers the top corner of the child element vertically. Here to center the child element, apply a negative top margin set to half the child element’s height.

.parent{
  width:100px;
  height:400px;
  background:green;
  position:relative
}
.child{
  width:100px;
  height:100px;
  background:blue;
  position:absolute;
  top:50%;
  margin-top:-50px;
}

Align Div vertically center with CSS absolute position and transform

Set position property of the parent element to relative. Now set the position property of the child element to absolute and top to 50%. This just centers the top corner of the child element horizontally. To center the child element perfectly, apply transform to translateY(-50%)

.parent{
  width:100px;
  height:400px;
  background:green;
  position:relative
}
.child{
  width:100px;
  height:100px;
  background:blue;
  position:absolute;
  top:50%;
  transform:translateY(-50%)
}

Align Div vertically center with Flexbox

.parent{
  width:100px;
  height:400px;
  background:green;
  display:flex;
  align-items:center
}
.child{
  width:100px;
  height:100px;
  background:blue;
}

How to center both horizontally and vertically

How to Center a Div Vertically and Horizontally with CSS absolute Position and Negative Margins

Set position property of the parent element to relative. Now set the position property of the child element to absolute. top and left to 50%. This just centers the top and left corner of the child element horizontally and vertically. Here to center the child element, apply a negative top margin set to half the child element’s height and a negative left margin set to half the child element’s width.

.parent{
  width:400px;
  height:400px;
  background:green;
  position:relative;
}
.child{
  width:100px;
  height:100px;
  background:blue;
  position:absolute;
  left:50%;
  top:50%;
  margin-left: -50px;
  margin-top: -50px;
}

How to Center a Div Vertically and Horizontally with CSS absolute Position and transform

Set position property of the parent element to relative. Now set the position property of the child element to absolute. top and left to 50%. This just centers the top and left corner of the child element horizontally and vertically. Now use transform: translate(-50%, -50%) to truly center the child element:

.parent{
  width:400px;
  height:400px;
  background:green;
  position:relative
}
.child{
  width:100px;
  height:100px;
  background:blue;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
}

How to Center a Div Vertically and Horizontally with CSS Flexbox

.parent{
  width:400px;
  height:400px;
  background:green;
  display:flex;
  justify-content:center;
  align-items: center;
}
.child{
  width:100px;
  height:100px;
  background:blue;
}

How to Center a Div Vertically and Horizontally with position absolute and margin

.parent{
  width:400px;
  height:400px;
  background:green;
  position:absolute;
}
.child{
  width:100px;
  height:100px;
  background:blue;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

That is everything that you should know for aligning center horizontally, vertically, and both vertically and horizontally.