[html] ¿Cómo centrar horizontalmente un <div> en otro <div>?



14 Answers

Si no desea establecer un ancho fijo en el div interno, podría hacer algo como esto:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Eso hace que el div interno se convierta en un elemento en línea que se puede centrar con text-align .

Question

¿Cómo puedo centralizar horizontalmente un <div> dentro de otro <div> usando CSS (si es posible)?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>



Me doy cuenta de que llegué bastante tarde al juego, pero esta es una pregunta muy popular, y recientemente encontré un enfoque que no he visto mencionado aquí, así que pensé en documentarlo.

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

EDITAR: ambos elementos deben tener el mismo ancho para funcionar correctamente.




Recientemente tuve que centrar un div "oculto" (es decir, display: ninguno;) que tenía una forma presentada dentro de él que debía centrarse en la página. Escribí el siguiente jQuery para mostrar el div oculto y luego actualizar el CSS al ancho generado automáticamente de la tabla y cambiar el margen para centrarlo. (El alternador de visualización se activa haciendo clic en un enlace, pero este código no fue necesario para mostrar).

NOTA: Estoy compartiendo este código porque Google me trajo a esta solución de desbordamiento de pila y todo habría funcionado, excepto que los elementos ocultos no tienen ningún ancho y no se pueden cambiar de tamaño / centrado hasta después de que se muestren.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>







Bueno, logré encontrar una solución que tal vez se ajuste a todas las situaciones, pero usa JavaScript:

Aquí está la estructura:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

Y aquí está el fragmento de JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Si desea usarlo en un enfoque receptivo, puede agregar lo siguiente:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});



Chris Coyier, que escribió una excelente publicación sobre "Centrarse en lo desconocido" en su blog. Es un resumen de múltiples soluciones. Publiqué uno que no está publicado en esta pregunta. Tiene más soporte para navegadores que la solución flexbox, y no está usando display: table; que podría romper otras cosas.

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width:0;
  overflow:hidden;
}

/* The element to be centered, can
   also be of any width and height */ 
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}



Por ejemplo, vea este enlace y el siguiente fragmento:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Si tienes muchos hijos con un padre, entonces tu contenido CSS debe ser como este ejemplo en violín .

El contenido HTML se ve así:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Entonces vea este ejemplo en violín .




Si el ancho del contenido es desconocido, puede usar el siguiente método . Supongamos que tenemos estos dos elementos:

  • .outer - ancho completo
  • .inner - sin ancho establecido (pero se puede especificar un ancho máximo)

Supongamos que el ancho calculado de los elementos es 1000px y 300px respectivamente. Proceder de la siguiente:

  1. Wrap .inner dentro .center-helper
  2. Haga .center-helper un bloque en línea; se convierte en el mismo tamaño que .inner por lo que es 300px de ancho.
  3. Presione .center-helper 50% en relación a su padre; esto coloca su izquierda en 500px wrt. exterior.
  4. Presione .inner 50% restante en relación con su elemento primario; esto coloca su izquierda en -150px wrt. centro de ayudante, lo que significa que su izquierda está en 500 - 150 = 350px wrt. exterior.
  5. Establezca el desbordamiento de .outer a oculto para evitar la barra de desplazamiento horizontal.

Manifestación:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}



Para Firefox y Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Para Internet Explorer, Firefox y Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

La propiedad text-align: es opcional para navegadores modernos, pero es necesaria en Internet Explorer Quirks Mode para el soporte de navegadores antiguos.




Supongamos que tu div tiene 200px ancho:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Asegúrese de que el elemento principal esté positioned es decir, relativo, fijo, absoluto o adhesivo.

Si no conoce el ancho de su div, puede usar transform:translateX(-50%); en lugar del margen negativo

https://jsfiddle.net/gjvfxxdj/




Centrar una div de altura y ancho desconocidos

Horizontal y verticalmente Funciona con navegadores razonablemente modernos (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, etc.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Codepen más con Codepen o con JSBin .




Text-align: center

Al aplicar text-align: center los contenidos en línea se centran dentro del cuadro de línea. Sin embargo, dado que el div interno tiene un width: 100% predeterminado width: 100% debe establecer un ancho específico o usar uno de los siguientes:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Margen: 0 auto

Usando margin: 0 auto es otra opción y es más adecuado para la compatibilidad con navegadores más antiguos. Funciona junto con display: table .

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Flexbox

display: flex comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de flexbox. Funciona con justify-content: center .

Tenga en cuenta: Flexbox es compatible con la mayoría de los navegadores, pero no con todos. Consulte here para obtener una lista completa y actualizada de la compatibilidad de los navegadores.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Transformar

transform: translate permite modificar el espacio de coordenadas del modelo de formato visual CSS. Utilizándolo, los elementos pueden ser traducidos, rotados, escalados y sesgados. Para centrar horizontalmente, se requiere una position: absolute e left: 50% .

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

<center> (Obsoleto)

La etiqueta <center> es la alternativa HTML a text-align: center . Funciona en navegadores antiguos y la mayoría de los nuevos, pero no se considera una buena práctica ya que esta característica es obsolete y se ha eliminado de los estándares web.

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>




Algunos carteles han mencionado la forma de CSS 3 para centrarse usando display:box .

Esta sintaxis está desactualizada y no debería usarse más. [Ver también esta publicación] .

Entonces, para completar, aquí está la última forma de centrarse en CSS 3 utilizando el Módulo de diseño de caja flexible .

Entonces, si tiene marcas simples como:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... y quiere centrar sus elementos dentro del cuadro, esto es lo que necesita en el elemento principal (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Si necesita admitir navegadores más antiguos que usan una sintaxis más antigua para flexbox, here's un buen lugar para buscar.




Una opción existía que encontré:

Todos dicen que uses:

margin: auto 0;

Pero hay otra opción. Establezca esta propiedad para el div principal. Funciona perfectamente en cualquier momento:

text-align: center;

Y mira, el niño va al centro.

Y finalmente CSS para ti:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}



Esto es lo que quieres de la manera más corta.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}





Related