Поместите изображение в центр DIV

Question

Я пытаюсь центрировать изображение в центре DIV и делал это много раз, но в этом случае он не работает. Я хочу, чтобы изображение было центрировано по вертикали и по горизонтали в div, и когда страница была изменена, изображение остается в центре. Не могли бы вы пересмотреть мой код и дать какую-нибудь идею?

Благодарность кучи

DIV класс = "headerContainer">

<div class="headerContainerLogoContainer"> 
     <div class="headerContainerLogoContainerLogo"> 
      <img src="images/blinkLogo.png" alt=""> 
     </div> 

    </div> 

    <div class="nav"> 

     <ul> 
      <li><a href="#home"> <br>BLINK</a></li> 
      <li><a href="#news"><br>ADVERTISING WITH BLINK</a></li> 
      <li><a href="#contact"><br>EDUCATING WITH BLINK</a></li> 
      <li><a href="#about"><br>ABOUT US</a></li> 
     </ul> 

    </div> 


</div> 

body { 
    margin: 0px; 
    background-color: #000000; 
    height: 2000px; 
} 


/* 1. HEADER */ 

.headerContainer { 
    width: auto; 
    height: 320px; 
    background-color: #000000; 
    position: relative; 
    border: 1px dotted #fff; 
} 

.headerContainerLogoContainer { 
    width: auto; 
    height: 250px; 
    background-color: #000000; 
    position: relative; 
} 

.headerContainerLogoContainerLogo { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -50px; 
    margin-top: -50px; 
} 

.nav { 

    width: auto; 
    height: 70px; 
    background-color: #0f0f0f; 
    position: relative; 
    overflow: hidden; 

} 

Answer 1

#content img { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle 
} 

Попробуйте это, иначе вы можете использовать тег центра Arround вашего IMG тега, и создать маржин-вершину х px для размещения изображения.

Answer 2

просто использовать: text-align:center; для .headerContainerLogoContainer