Tengo un contenedor dentro del cual obtendré contenido dinámicamente. Quiero que todos los próximos contenidos / div se centren automáticamente. No quiero usar la propiedad de margen.

<div class="linContainer">

   <div class="content1"></div>
   <div class="content2"></div>

</div>
3
Pratik N 9 may. 2016 a las 08:50

8 respuestas

La mejor respuesta

Para centrar verticalmente Y horizontalmente, puede cambiar el valor predeterminado display de block a table-cell.

Violín

3
Vincent G 9 may. 2016 a las 06:02

La mejor manera de lograr esto es usar css flex.

Nota: el margen se acaba de utilizar para definir el espacio entre bloques de contenido, no para centrarlo.

.flex-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	flex-flow: row wrap;
	align-content: flex-end;
}

  .linContainer{
   background:#aeaeae;
   }

.content1, .content2, .content3, .content4{
  background:lawngreen;
  padding:20px;
  margin:10px;
  
  }
<div class="linContainer flex-container">

   <div class="content1"></div>
   <div class="content2"></div>
   <div class="content3"></div>
   <div class="content4"></div>

</div>
0
Arun Sharma 9 may. 2016 a las 06:08

Puede usar la siguiente expresión position: absolute:

.linContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

[class^='content'] {
  height: 50px;
  width: 50px;
  background: cyan;
  border: 1px solid black;
}
<div class="linContainer">

   <div class="content1"></div>
   <div class="content2"></div>

</div>

O puede usar flexbox - display: flex:

.linContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

[class^='content'] {
  height: 50px;
  width: 50px;
  background: cyan;
  border: 1px solid black;
}
<div class="linContainer">

   <div class="content1"></div>
   <div class="content2"></div>

</div>

Buenas referencias sobre centrado con CSS:

0
timolawl 9 may. 2016 a las 06:03

No estoy segura de si text-align:center servirá para el propósito.

 .linContainer{
  width:150px;
  height:auto;
  text-align:center;
  border:1px solid red;
  max-height:200px;
}

Puede verificar esto jsfiddle

0
brk 9 may. 2016 a las 05:58

Puede hacer esto:

.linContainer {
    text-align: center;
}

Tenga en cuenta que todo estará centrado (incluido el texto). ¿O quieres centrar solo divs?

0
Gytis Tenovimas 9 may. 2016 a las 05:52

Probar este código

.lincontainer {
display: flex;
justify-content: center;
}
0
Dhaval Chheda 9 may. 2016 a las 05:52
<div class="align">
     Test
</div>


div.align {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 200px;
    height: 200px;
    background-color:#ff6a00;
}
0
whostolemyhat 9 may. 2016 a las 08:46
.container {
    width: 100%;
    height: 120px;
    background: #ccc;
    text-align : center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="container">
    <div class="centered-content">
        Center this!
   </div>
</div>
0
Mia 9 may. 2016 a las 05:56