Aligning an element the way we want is never an easy task, especially when a non-UI developer is doing it and this problem worsens when we try to align that element Vertically-Center. Although doing it using patches is not difficult, but doing it the right way is a challenge.<\/p>\n
Here you\u2019ll find some cool CSS techniques by which you can easily Vertically-Center align any element.<\/p>\n
Below find the html snippet:<\/p>\n
[java]
\n<div class="parent"><\/p>\n
<div class="child">Content<\/div><\/p>\n
<\/div>
\n[\/java]<\/p>\n
Given below are the CSS protocols, which can be applied to align the child element in the center of the parent element.<\/p>\n
Table Method<\/strong><\/p>\n [java] \tdisplay:table;<\/p>\n }<\/p>\n .child {<\/p>\n \tdisplay:table-cell; } Flexbox Layout Method<\/strong><\/p>\n [java] \tdisplay: -webkit-flexbox; } Translate() Method<\/strong><\/p>\n [java] \tposition: relative;<\/p>\n }<\/p>\n .child {<\/p>\n position: absolute; } Absolute Positioning and Stretching Method<\/strong><\/p>\n [java] \tposition: relative;<\/p>\n }<\/p>\n .child {<\/p>\n \tposition: absolute; } I have tried my best to keep it as simple as possible, and it should solve your purpose that too conventionally.<\/p>\n Cheers!!!<\/p>\n","protected":false},"excerpt":{"rendered":" Aligning an element the way we want is never an easy task, especially when a non-UI developer is doing it and this problem worsens when we try to align that element Vertically-Center. Although doing it using patches is not difficult, but doing it the right way is a challenge. Here you\u2019ll find some cool CSS […]<\/p>\n","protected":false},"author":130,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3,"footnotes":""},"categories":[1],"tags":[355,4842],"class_list":["post-23569","post","type-post","status-publish","format-standard","hentry","category-technology","tag-css3","tag-html"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
\n.parent {<\/p>\n
\n\tvertical-align:middle;<\/p>\n
\n[\/java]<\/p>\n
\n.parent {<\/p>\n
\n \tdisplay: -ms-flexbox;
\n\tdisplay: -webkit-flex;
\n\tdisplay: flex;
\n\t-webkit-flex-align: center;
\n \t-ms-flex-align: center;
\n \t-webkit-align-items: center;
\n \talign-items: center;
\n \ttext-align: center; <\/p>\n
\n[\/java]<\/p>\n
\n.parent {<\/p>\n
\n left: 50%;
\n top: 50%;
\n margin-left: -25%;
\n margin-top: -25%;
\n transform: translate(-50%, -50%);
\n width: 40%;
\n height: 50%;<\/p>\n
\n[\/java]<\/p>\n
\n.parent {<\/p>\n
\n top: 0;
\n bottom: 0;
\n left: 0;
\n right: 0;
\n width: 50%;
\n height: 30%;
\n margin: auto;<\/p>\n
\n[\/java]<\/p>\n