'CSS Left : 50% puts element to the edge of the screen [duplicate]

I'm trying to center a button on my website, so I tried left : 50% to get it to the middle of the screen, but for some reason it brings it all the way to the right side of the screen. Here's the code:

#ContactButton {
    font-size: 20px;
    border: none;
    width : 120px;
    position : relative;
    height: 30px;
    font-weight: 500;
    border-radius: 30px;
    left : 50%;
}
htmlcssscaling


Solution 1:[1]

There are many ways. On the button itself, you can just use margin: 0 auto;.

Or you could maybe just use text-align: center on the button's container.

Or, for example, you could use flexbox on the buttons container:

.container{
   display: flex;
   justify-content: center;
}

And there are several other possibilities. Check the link @cloned gave you on his comment.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Luca Reghellin

Related Questions