Search code examples
htmlcsscentering

Centering div with border on the page

I need to center div on my page. Dimensions are not fixed. Here is what I do to center it 

background-image: url(../img/icon.png);
    background-repeat:no-repeat;
    background-size:cover;
    border: 5px solid;
    border-radius: 10px;
    border-color: #ffffff;
    box-shadow: 0 10px 6px -3px black;;
    position: absolute;
    height: 85%;
    width: 82%;
    top: 7.5%;
    left: 9%;

And this works fine if I don't have a border property set. If I set it to lets say 5px div is not horizontally centered anymore. How can I fix this?

Solution

  • Add box-sizing: border-box;. So the border does not extend your div.

    More box-sizing: css-tricks.com/box-sizing