Centering an anchor tag inside a div

Question

I have an anchor containing an image that I want to center within a div tag of the bootstrap navbar

The height and width of the image is unknown so I'd like to center it horizontally and vertically without having to calculate padding

<div class="navbar-header">
    <a class="navbar-left" href="index.html"><span role="link" class="logo"></span></a>
</div>

.navbar-header{
    width: 250px;
    height: 60px;
    float: left;
}

.navbar-left{
    float: left!important;
}

.logo {
    background-image: url(/image.png);
    background-position: center;
    background-size: 100%;
    border: none;
    display: block;
    height: 51px;
    width: 185px;
    margin: 0;
    text-indent: -9999px;
}

Answer 1

I highly recommend the following article: https://css-tricks.com/centering-css-complete-guide/

 .navbar-header{ width: 250px; height: 60px; float: left; background-color: rgba(255,0,0,0.1); position: relative; } .navbar-left{ /* float: left!important; */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .logo { background-image: url(https://picsum.photos/id/10/555/153); background-position: center; background-size: 100%; border: none; display: block; height: 51px; width: 185px; margin: 0; padding: 0; text-indent: -9999px; }

 <div class="navbar-header"> <a class="navbar-left" href="index.html"> <span role="link" class="logo"></span> </a> </div>

Answer 2

Remove this CSS

.navbar-left{
    float: left!important;
}

Add margin 0 auto on logo

.logo {
    background-image: url(/image.png);
    background-position: center;
    background-size: 100%;
    border: none;
    display: block;
    height: 51px;
    width: 185px;
    margin: 0 auto;/*Edit This*/
    text-indent: -9999px;
}