Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is is top:50% in css not working?

Tags:

html

css

I am making a website and I'm trying to vertically center:

 position: absolute;  width:1200px;  height:600px;  top: 50%;  left: 50%;  margin-left: -600px; 

and my HTML is a single div

like image 831
swenflea Avatar asked Mar 19 '12 05:03

swenflea


People also ask

Why is Z Index not working CSS?

z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.

How do you get top in CSS?

You can use the parseInt() function to convert the string to a number, e.g: parseInt($('#elem'). css('top'));

How do I fix Z index in CSS?

In Summary To sum up, most issues with z-index can be solved by following these two guidelines: Check that the elements have their position set and z-index numbers in the correct order. Make sure that you don't have parent elements limiting the z-index level of their children.

What does 100% do in CSS?

It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.


1 Answers

Using Position - Static height needed

i{   -webkit-transform: translate(-50%,-50%);   transform: translate(-50%,-50%);   position: absolute;   top: 50%;   left: 50%; }
<i>center</i>

Edit: Using Flex (2021-10-19)

i {   display: flex;   align-items: center; /* vertical centering if flex-direction: row */   justify-content: center; /* horizontal centering if flex-direction: row */    /* extra styles */   background-color: limeGreen;   min-height: 160px; }
<i>center</i>
enter code here 
like image 191
w3debugger Avatar answered Sep 23 '22 00:09

w3debugger