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":0},"categories":[1],"tags":[355,4842],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/23569"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/130"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=23569"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/23569\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=23569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=23569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=23569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\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