Return to Answer

deleted 33 characters in body

edited Oct 29, 2017 at 0:35

21.3k
84
84
122

To answer your question why top: 50% is not working, when you use property top on an element, the parent of that element needs to have a static height set in place. This should be in pxpx or a unit other than percent. If you really need to use percent in your parent as well, then you can move on to the next parent (which is the parent of that parent) and have that one a fixed static height.

To vertically centering anything. I prefer to use this method here

The use of cssCSS transform since you don't have to know what the width of height your element has.

Using javascriptJavaScript take the natural height of the parent element and then set the height property of that parent element to the value you just took. You can use this method when the height of the parent element is caused by another child element that is sibling to the element you are centering.

Tip: If you are taking responsive into concern, just set height again in javscriptJavaScript on browser resize. You can get the new natural height by setting height to auto in javascriptJavaScript and do the process again.

You can scratch the ideas above and use centering with display: table instead. CssCSS-tricksTricks has a very good example here.

Hope this helps someone. :)

To answer your question why top: 50% is not working, when you use property top on an element, the parent of that element needs to have a static height set in place. This should be in px or a unit other than percent. If you really need to use percent in your parent as well, then you can move on to the next parent (which is the parent of that parent) and have that one a fixed static height.

To vertically centering anything. I prefer to use this method here

The use of css transform since you don't have to know what the width of height your element has.

Using javascript take the natural height of the parent element and then set the height property of that parent element to the value you just took. You can use this method when the height of the parent element is caused by another child element that is sibling to the element you are centering.

Tip: If you are taking responsive into concern, just set height again in javscript on browser resize. You can get the new natural height by setting height to auto in javascript and do the process again.

You can scratch the ideas above and use centering with display: table instead. Css-tricks has a very good example here.

Hope this helps someone. :)

To answer your question why top: 50% is not working, when you use property top on an element, the parent of that element needs to have a static height set in place. This should be in px or a unit other than percent. If you really need to use percent in your parent as well, then you can move on to the next parent (which is the parent of that parent) and have that one a fixed static height.

To vertically centering anything. I prefer to use this method

The use of CSS transform since you don't have to know what the width of height your element has.

Using JavaScript take the natural height of the parent element and then set the height property of that parent element to the value you just took. You can use this method when the height of the parent element is caused by another child element that is sibling to the element you are centering.

Tip: If you are taking responsive into concern, just set height again in JavaScript on browser resize. You can get the new natural height by setting height to auto in JavaScript and do the process again.

You can scratch the ideas above and use centering with display: table instead. CSS-Tricks has a very good example here.

Corrections and additional info

Source Link

edited Oct 29, 2017 at 0:20

Jomar Sevillejo

1.7k
2
21
33

To answer your question why top: 50% is not working, when you ususe property top on an element, the parent of that element needs to have a static height set in place. This should be in px or a unit other than percent. If you really need to use percent in your parent as well, then you can move on to the next parent (which is the parent of that parent) and have that one a fixed static height.

To answer your question why top: 50% is not working, when you us property top on an element, the parent of that element needs to have a static height set.

To answer your question why top: 50% is not working, when you use property top on an element, the parent of that element needs to have a static height set in place. This should be in px or a unit other than percent. If you really need to use percent in your parent as well, then you can move on to the next parent (which is the parent of that parent) and have that one a fixed static height.

Source Link

answered Sep 10, 2016 at 22:02

Jomar Sevillejo

1.7k
2
21
33

To answer your question why top: 50% is not working, when you us property top on an element, the parent of that element needs to have a static height set.

To vertically centering anything. I prefer to use this method here

The use of css transform since you don't have to know what the width of height your element has.

position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);

Don't forget to add browser/vendor prefixes.

You can refer here for vendor prefixes.

If you don't know the height of your parent. You have two options:

Using javascript take the natural height of the parent element and then set the height property of that parent element to the value you just took. You can use this method when the height of the parent element is caused by another child element that is sibling to the element you are centering.

$('.parent').height( $(this).height() );

.parent { /* Unkown height */ } .child { /* Create columns */ width: 50%; float: left; } .child-1 { position: relative; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Example Start --> <div class="parent"> <div class="child child-1"> Lorem ipsum </div> <div class="child child-2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div>

You can scratch the ideas above and use centering with display: table instead. Css-tricks has a very good example here.

Hope this helps someone. :)

Collectives™ on Stack Overflow

Return to Answer