Center Div with css 3 Different Techniques

A Web designer has to take care of many things while designing a Website. One is how to center the content exactly horizontally and vertically. There are many techniques and some new properties of css3 available by which you can center the content. Following I have gave some example how to center the content with css. And the best part is these techniques will work in case of dynamic height and width .

1)If you want to center the div horizontally.

In the following I have give left and right margin auto. That will put the content in the horizontally center of its parent
.center-hor{
width:100px;
height:100px;
margin-left:auto;
margin-right:auto;
display:block
}

See the Pen jsofJ by Atinder pal singh (@thinklala) on CodePen

2)Center the content horizontally and vertically

The following css class will put the content horizontally and vertically centered of its parent .The idea is first I set the top and left of content 50% from its parent that will put the top left corner of content at center of its parent and then I will give margin-top and margin-left half of its height and width. That will put the content exactly center.
.center-hor-ver{
width:100px;
height:100px;
display:block;
position: absolute;
left:50%;
margin-left:-50px;
top:50%;
margin-top:-50px;
}

See the Pen Center div horizontally and vertically by Atinder pal singh (@thinklala) on CodePen

3)Center the child div horizontally and vertically With css3

Here are some new properties of css 3 that will always put the child div in the center of parent div. in this we don’t need to give absolute position to any div. In the case of dynamic height width this is the best to use for centering the content.
.Center-child-div{
height: 300px;
width: 300px;
border: 1px solid #000000;
-moz-box-align: center;
-moz-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-pack: center;
-webkit-box-align: center;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
align-items: center;
display: inline-flex;
justify-content: center;
vertical-align: text-top;
}

See the Pen centered child div with css by Atinder pal singh (@thinklala) on CodePen