Cómo centrar horizontalmente un <div>


4290

¿Cómo puedo centrar horizontalmente un <div>dentro de otro <div>usando CSS?

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

13
De esas excelentes respuestas, solo quiero resaltar que debe dar a "#inner" un "ancho", o será "100%", y no puede saber si ya está centrado.
Jony

Joma Tech me trajo aquí
Barbu Barbu

@Barbu Barbu: ¿De qué manera? ¿En que contexto?
Peter Mortensen

Respuestas:


4727

Puede aplicar este CSS al interior <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Por supuesto, usted no tiene que establecer el widtha 50%. Cualquier ancho menor que el que contenga <div>funcionará. El margin: 0 autoes lo que hace el centrado real.

Si está apuntando a Internet Explorer 8 (y posterior), podría ser mejor tener esto en su lugar:

#inner {
  display: table;
  margin: 0 auto;
}

Hará que el elemento interno se centre horizontalmente y funcione sin establecer un elemento específico width.

Ejemplo de trabajo aquí:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


12
Para el centrado vertical, generalmente uso "line-height" (line-height == height). Esto es simple y agradable, pero solo funciona con un texto de contenido de una línea :)
Nicolas Guillaume

98
Debe usar la etiqueta! DOCTYPE en su página html para que funcione bien en IE.
Fabio

15
Tenga en cuenta que puede ser necesario agregar "float: none;" para el #inner.
Mert Mertce

15
También establece los márgenes superior e inferior en 0, lo que no está relacionado. Mejor puesta margin-left: auto; margin-right: autocreo.
Emmanuel Touzery

13
No necesariamente margin:0 auto: puede ser el margin: <whatever_vertical_margin_you_need> autosegundo margen horizontal.
YakovL

1247

Si no desea establecer un ancho fijo en el interior div, puede 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 convierte el interior diven un elemento en línea con el que se puede centrar text-align.


13
@SabaAhang la sintaxis correcta para eso sería float: none;y, probablemente, sólo es necesario porque #interno ha heredado una floatde cualquiera lefto rightde algún otro sitio en el CSS.
Doug McLean

8
Esta es una buena solución. Hemos de tener en cuenta que heredará interior text-alignpor lo que puede configurar de interiores text-aligna initialo algún otro valor.
pmoleri

buena solución, creo que sí
Simon

381

Los mejores enfoques son con CSS 3 .

Modelo de caja:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Según su usabilidad, también puede usar las box-orient, box-flex, box-directionpropiedades.

Flex :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Lea más sobre centrar los elementos secundarios

Y esto explica por qué el modelo de caja es el mejor enfoque :


25
Asegúrese de leer esta respuesta primero antes de implementar esta solución.
cimmanon

44
Safari, a partir de ahora, todavía requiere -webkitbanderas para FlexBox ( display: -webkit-flex;y -webkit-align-items: center;, y -webkit-justify-content: center;)
Joseph Hansen

Siempre pienso que usar código de lotes es una mala práctica, por ejemplo, con este código centro mi div: display: table; margen: auto; simple y fácil
simon

Soy yo o este fragmento de código no está centrado
Mike

En 2020 podemos usar flexbox caniuse.com/#feat=flexbox
tonygatta

251

Suponga que su div tiene 200 píxeles de ancho:

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

Asegúrese de que el elemento padre esté posicionado , es decir, relativo, fijo, absoluto o fijo.

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

https://jsfiddle.net/gjvfxxdj/

Con CSS calc () , el código puede ser aún más simple:


.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

El principio sigue siendo el mismo; coloque el artículo en el medio y compense el ancho.


No me gusta esta solución porque cuando el elemento interno es demasiado ancho para la pantalla, no puede desplazarse horizontalmente por todo el elemento. margen: 0 automático funciona mejor.
Aloso

margen izquierdo: auto; margen derecho: auto; centra un elemento de nivel de bloque
mata pantalla

El ancho predeterminado para la mayoría de los elementos de nivel de bloque es automático, que llena el área disponible en la pantalla. Simplemente estar centrado lo coloca en la misma posición que la alineación izquierda. Si desea que esté centrado visualmente, debe establecer un ancho (o un ancho máximo, aunque Internet Explorer 6 y versiones anteriores no lo admiten, e IE 7 solo lo admite en modo estándar).
Killscreen

228

He creado este ejemplo para mostrar cómo hacerlo vertical y horizontalmente align .

El código es básicamente esto:

#outer {
  position: relative;
}

y...

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

Y se mantendrá centerincluso cuando cambie el tamaño de su pantalla.


12
+1 para este método, estaba a punto de responder con él. Tenga en cuenta que debe declarar un ancho en el elemento que desea centrar horizontalmente (o altura si se centra verticalmente). Aquí hay una explicación completa: codepen.io/shshaw/full/gEiDt . Uno de los métodos más versátiles y ampliamente admitidos para centrar elementos vertical y / u horizontalmente.
stvnrynlds

66
No puede usar relleno dentro del div, pero si desea dar la ilusión use un borde del mismo color.
Squirrl

Creo que para que este método funcione, debe establecer el tamaño y la altura del div interno
Nicolas S.Xu

212

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

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

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

Entonces, si tiene un marcado simple como:

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

... y desea centrar sus elementos dentro del cuadro, esto es lo que necesita en el elemento primario (.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 */
}

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


¿Qué quiere decir con "la sintaxis está desactualizada", está en desuso?
Konga Raju

66
La especificación Flexbox ha pasado por 3 revisiones principales. El borrador más reciente es de septiembre de 2012, que oficialmente desprecia todos los borradores anteriores. Sin embargo, el soporte del navegador es irregular (particularmente los navegadores Android antiguos): stackoverflow.com/questions/15662578/…
cimmanon

Esto funcionó para mí en Chrome cuando la versión de Justin Poliey no.
Vern Jensen

¿No es el "justify-content: center;" para la alineación vertical y los "elementos de alineación: centro;" para la alineación horizontal?
Wouter Vanherck

3
@WouterVanherck depende del flex-directionvalor. Si es 'fila' (el valor predeterminado), entonces justify-content: center; es para la alineación horizontal (como mencioné en la respuesta) Si es 'columna', entonces justify-content: center;es para la alineación vertical.
Danield


97

Centrar un div de altura y anchura desconocidas

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>

Juegue con él más en Codepen o en JSBin .


89

No se puede centrar si no le das un ancho. De lo contrario, tomará, por defecto, todo el espacio horizontal.


49
y si no sabes el ancho? ¿Decir porque el contenido es dinámico?
gman

¿anchura máxima? que hay de eso

1
Yo uso width: fit-content;y margin: 0 auto. Creo que esto puede funcionar con un ancho desconocido.
Rick


88

Establecer widthy establecer margin-lefty margin-rightpara auto. Sin embargo, eso es solo horizontal . Si quieres en ambos sentidos, lo harías en ambos sentidos. No tengas miedo de experimentar; No es que rompas nada.


62

Recientemente tuve que centrar un div "oculto" (es decir, display:none;) que tenía una forma de tabla dentro que debía centrarse en la página. Escribí el siguiente código jQuery para mostrar el div oculto y luego actualizar el contenido CSS al ancho generado automáticamente de la tabla y cambiar el margen para centrarlo. (La alternancia de visualización se activa al hacer clic en un enlace, pero este código no era 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 pueden redimensionarse / centrarse hasta que se muestran.

$(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>


59

La forma en que generalmente lo hago es usando la posición absoluta:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

El div externo no necesita ninguna propiedad adicional para que esto funcione.


Esto puede no funcionar si tiene otros divs debajo del div centrado.
NoChance

54

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 text-align:propiedad es opcional para los navegadores modernos, pero es necesaria en el modo Quirks de Internet Explorer para la compatibilidad con navegadores heredados.


55
No hay necesidad de propiedad de alineación de texto. Es completamente innecesario.
Touhid Rahman

text-align es realmente necesario para que funcione en el modo rápido de IE, por lo que si no le importa agregar una pequeña expresión para admitir navegadores más antiguos, manténgalo allí. (IE8 IE8 con IE7 gobierna y rige tanto trabajo sin text-align, así que puede ser que es sólo IE6 y más antiguas que se refiere)
heytools

52

Utilizar:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>


47

Otra solución para esto sin tener que establecer un ancho para uno de los elementos es usar el transformatributo CSS 3 .

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

El truco es que translateX(-50%)establece el #innerelemento 50 por ciento a la izquierda de su propio ancho. Puedes usar el mismo truco para la alineación vertical.

Aquí hay un violín que muestra la alineación horizontal y vertical.

Más información está en Mozilla Developer Network .


2
Uno también puede necesitar prefijos de proveedor:-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
Skippy le Grand Gourou

45

Chris Coyier, quien 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 el navegador que la solución Flexbox , y no está utilizando lo 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;
}

39

Recientemente encontré un enfoque:

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

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

Ambos elementos deben tener el mismo ancho para funcionar correctamente.


Sólo tienes que configurar esta regla para #innersolamente: #inner { position:relative; left:50%; transform:translateX(-50%); }. Esto funciona para cualquier ancho.
Jose Rui Santos

33

Por ejemplo, vea este enlace y el fragmento a continuación:

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 tiene muchos hijos con un padre, entonces su contenido CSS debe ser como este ejemplo en Fiddle .

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>

Luego vea este ejemplo en violín .


28

Centrado solo horizontalmente

En mi experiencia, la mejor manera de centrar un cuadro horizontalmente es aplicar las siguientes propiedades:

El contenedor:

  • debería tener text-align: center;

El cuadro de contenido:

  • debería tener display: inline-block;

Manifestación:

.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>

Ver también este violín !


Centrado tanto horizontal como verticalmente

En mi experiencia, la mejor manera de centrar una caja tanto vertical como horizontalmente es usar un contenedor adicional y aplicar las siguientes propiedades:

El contenedor exterior:

  • debería tener display: table;

El contenedor interior:

  • debería tener display: table-cell;
  • debería tener vertical-align: middle;
  • debería tener text-align: center;

El cuadro de contenido:

  • debería tener display: inline-block;

Manifestación:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Ver también este violín !


27

La forma más fácil:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>


1
Como señala su violín, #inner debe tener un ancho establecido.
Michael Terry

#outerno necesita ninguno, width:100%;ya que <div>por defecto siempre lo ha hecho width:100%. y text-align:centertampoco es necesario en absoluto.
Mobarak Ali

27

Si se desconoce el ancho del contenido, puede utilizar el siguiente método . Supongamos que tenemos estos dos elementos:

  • .outer - ancho completo
  • .inner - no se establece el ancho (pero se puede especificar un ancho máximo)

Suponga que el ancho calculado de los elementos es de 1000 píxeles y 300 píxeles respectivamente. Proceder de la siguiente:

  1. Envuelva .inneradentro.center-helper
  2. Haz .center-helperun bloque en línea; tiene el mismo tamaño .innerque 300 píxeles de ancho.
  3. Empuje .center-helper50% a la derecha en relación con su padre; Esto coloca su izquierda en 500 píxeles wrt. exterior.
  4. Empuje el .inner50% restante en relación con su padre; Esto coloca su izquierda en -150 píxeles wrt. centro de ayuda, lo que significa que su izquierda está en 500 - 150 = 350 píxeles wrt. exterior.
  5. Establezca el desbordamiento en .outeroculto 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>


26

Puedes hacer algo como esto

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Esto también alineará #innerverticalmente. Si no quiere, elimine las propiedades displayy vertical-align;


25

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 % );
}

3
Eso lo centra verticalmente.
Michael Terry

22

Alinear texto: centro

La aplicación text-align: centerdel contenido en línea se centra en el cuadro de línea. Sin embargo, dado que el div interno tiene por defecto width: 100%, debe establecer un ancho específico o utilizar uno de los siguientes:


Margen: 0 automático

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


Flexbox

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

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


Transformar

transform: translatele permite modificar el espacio de coordenadas del modelo de formato visual CSS. Al usarlo, los elementos se pueden traducir, rotar, escalar y sesgar. Para centrar horizontalmente requiere position: absolutey left: 50%.


<center> (Obsoleto)

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


22

Puede usarlo display: flexpara su div externo y para centrar horizontalmente debe agregarjustify-content: center

#outer{
    display: flex;
    justify-content: center;
}

o puede visitar w3schools - CSS flex Property para obtener más ideas.


21

Flex tiene más del 97% de cobertura de soporte del navegador y podría ser la mejor manera de resolver este tipo de problemas en pocas líneas:

#outer {
  display: flex;
  justify-content: center;
}

21

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 con 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);
  })
});

21

Este método también funciona bien:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

Para el interior <div>, la única condición es que es heighty widthno debe ser más grande que las de su contenedor.


19

Existía una opción que encontré:

Todos dicen usar:

margin: auto 0;

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

text-align: center;

Y mira, niño, ve 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 */
}

trabajo de alineación de texto para alineación de texto en su contenedor, no para su contenedor a su padre.
Lalit Kumar Maurya

lo pruebo, tengo un problema con establecer hijo en el centro, debe cuando tiene más un hijo, más veces el margen: 0 respuesta automática de fuente, pero, centro de alineación de texto, para los padres hacen que este hijo sea el centro, incluso si son elementos y no ser texto, probar y ver qué pasa
Pnsadeghy

alinear texto solo en el texto central. Tienes razón en este momento, pero cuando escribes un contenedor CSS que contiene un hijo con diferente ancho y color, tu código no funciona. ¡Pruébalo de nuevo!
Lalit Kumar Maurya

¡Vea este ejemplo jsfiddle.net/uCdPK/2 y dígame qué piensa al respecto!
Lalit Kumar Maurya
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.