Center a div within another div 100%

Navigation
1

I have a div that is 100% and has a background image. 

.bannerTotalHome {
    background: url("../imagens/bannerTotalHome.jpg") no-repeat center;
    width: 100%;
    height: 570px;
    margin: 0 auto;
}

And inside there will be another div that will have a background image. 

.logoHome {
    background: url("../imagens/logoHanka.png") no-repeat center;
    width: 285px;
    height: 152px;
    position: absolute;
    left: 50%;
    margin-left: -142.5px;
}

What happens, is that I centralized the logo using position , I do not know if this is the most correct form, or if there is an easier way to do it?

My HTML looks like this: 

<div class="bannerTotalHome p-relative">
    <div class="logoHome margin-top-110"></div>
    <div class="margin-top-375 d-block">
        <h2>SUA MELHOR ESCOLHA EM</h2>
        <h1>COMPONENTES AUTOMOTIVOS</h1>
    </div>
</div>

In this case, if I use a margin-top within that div bannerTotalHome it will play the div down well. So I ask if the correct one to center that div inside the other is the way I did it.

    
asked by anonymous 05.02.2015 / 17:55

3 answers

1

I made some changes to your code using images from the internet to simulate and I believe that is what you would need ... if not, please let me know!

I added margin: 0 auto; to your class .logoHome

As André Ribeiro observed, he replaces position: absolute e margin-top:110px; with padding-top: 110px;

See the example:

  

link

    
05.02.2015 / 18:14
2

The easiest and simplest way is to use margin: 0 auto . It is enough that your% of parent% has a defined width. 

.a {
    height: 200px;
    width: 100%
}

.b {
    width: 80%;
    margin: 0 auto
}


/* somente para melhorar a visualização do exemplo */
.a{ background: #27ae60 }
.b{ background: #2ecc71; height: 100% }
<div class='a'>
    <div class='b'></div>
</div>

An alternative, taking advantage of the fact that your daughter div has a div position, is to centralize it by means of the absolute and left rules. For example, putting it 10% in relation to right and left: 

.a {
    position: relative;
    height: 200px;
    width: 100%
}

.b {
    position: absolute;
    left: 10%; right: 10%;
}

/* somente para melhorar a visualização do exemplo */
.a{ background: #c0392b }
.b{ background: #e74c3c; top: 0; bottom: 0 }
<div class='a'>
    <div class='b'></div>
</div>
    
05.02.2015 / 18:36
1

Hello friend, I've made an example below that you can check the link 

<div class="a">
        <div class="b">
            <img src="https://www.cardvantagens.com.br/static/img/home/versao_dois/logo.png">
        </div>
    </div>

    .a{
       float:left;
       background: #CCC;
       width: 100%;
       height: 570px;
    }
     .b{
         width: 35%;
        margin: 0 auto;
     }
    .b img{
        width: 294px;
        height: 75px;
        margin-top: 50%;
        float: left;
    }
    
09.02.2015 / 16:00
Application Security Change for Medium Trust Showing certain data depending on who logged in