centralizar imagem na div

[Kaayá Pezzuti 0]

Olá

 

Estou com um problema, não estou conseguindo centralizar a imagem na div nesse caso, centralizar literalmente tanto na vertical quanto na horizontal.

 

é o seguinte.

 

essa div FOTOS, pode ser que ela contenha 1 foto ou 10 fotos, dinamicamente.

 

caso ela tenha apenas 1 foto.. ela fica exatamente no centro da div.. caso ela tenha 5 fotos essas 5 fotos se alinham continuando no centro da div.. se houver 10 fotos ele ir centralizando automaticamente até que o tamanho da div seja alcançado e aumente a altura automaticamente...

 

não sei se consegui ser claro

e a div não pode ter medidas fixas porque uso media queryes

[Sensir 0]

Aqui tem um exemplo, altere para as suas necessidades. Experimente adicionar mais divs de imagem.

 

http://codepen.io/anon/pen/szihx

 

HTML:

<div class="main-wrapper">
  <div class="container">
     <div class="imagem"></div>
     <div class="imagem"></div>
     <div class="imagem"></div>
  </div>
</div>

CSS:

.main-wrapper
{
  position:relative;
  width:500px;
  height:500px;
  background:#666;
}

.container {
  position: relative;
  top: 50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
   -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
     -o-transform:translate(-50%, -50%);
        transform:translate(-50%, -50%);
  display:inline-block;
  font-size:0px;
}

.imagem
{
  display:inline-block;
  width:20px;
  height:20px;
  background:blue;
  border:1px solid black;
}

[xanburzum 169]

vc também pode aplicar a propriedade display:table; na div que contem a imagem.

[Kaayá Pezzuti 0]

 

Aqui tem um exemplo, altere para as suas necessidades. Experimente adicionar mais divs de imagem.

 

http://codepen.io/anon/pen/szihx

 

HTML:

<div class="main-wrapper">
  <div class="container">
     <div class="imagem"></div>
     <div class="imagem"></div>
     <div class="imagem"></div>
  </div>
</div>

CSS:

.main-wrapper
{
  position:relative;
  width:500px;
  height:500px;
  background:#666;
}

.container {
  position: relative;
  top: 50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
   -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
     -o-transform:translate(-50%, -50%);
        transform:translate(-50%, -50%);
  display:inline-block;
  font-size:0px;
}

.imagem
{
  display:inline-block;
  width:20px;
  height:20px;
  background:blue;
  border:1px solid black;
}

esse código funciona perfeitamente.. mas não na minha aplicação.. pois ja tem uma serie de css ja feitos e acaba dando conflito

 

vc também pode aplicar a propriedade display:table; na div que contem a imagem.

display:table na div ? mas simplesmente centraliza?