How to center div element (right: 50% Doesnt work)

Question

I'm trying to center a div element, but when I use this:

position: relative;
float: right;
right: 50%;
margin: 0 auto;

I get the following:

It just centers the right edge of the element and everything else goes to left.

Any ideas?

Answer 1

Just use:

margin-left: auto;
margin-right: auto;

Nothing else.

Answer 2

You can try below code:

For Horizontal:

margin:0 auto;

For Horizontal and vertical:

position:absolute;
top:50%;
left:50%; 
tranform:translate(-50%, -50%);