Cómo centrar horizontalmente un

Cómo centrar horizontalmente un

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

 <div id="outer">
  <div id="inner">Foo foo</div>
</div>
  
Mostrar la mejor respuesta

De esas excelentes respuestas, solo quiero resaltar que debes darle a "#inner" un "ancho", o será "100%", y no puedes saber si ya está centrado.

Joma Tech me trajo aquí

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

Puede aplicar este CSS al <div> interno:

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

Por supuesto, no es necesario que establezca width en 50% . Cualquier ancho menor que el <div> que lo contiene funcionará. El margin: 0 auto es lo que hace el centrado real.

Si su orientación es Internet Explorer 8 (y posterior), sería mejor tener esto en su lugar:

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

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

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>  

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

en algunos casos, sería necesario escribir la cláusula !important para el estilo de margen del div interno, p. cuando escribiste algo como este outer div {margin: 0.5em;}

Tienes que usar la etiqueta! DOCTYPE en tu página html para que funcione bien en IE.

¿Alguien puede explicar cómo funciona display: table? ¿Por qué los elementos con este estilo aplicado se reducen automáticamente al tamaño de los elementos internos?

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

@Zhanger FYI: <div style="display: table;">stuff</div> es lo mismo que <table>stuff</table> . Asignar la pantalla de esa manera solo le dice al navegador que represente el elemento como una tabla.

También establece los márgenes superior e inferior en 0, que no está relacionado. Creo que es mejor poner margin-left: auto; margin-right: auto .

Para admitir navegadores móviles, no recomiendo utilizar width: 50% . Utilice algo como max-width: 300px en su lugar.

Esto funciona bien en Chrome pero NO es compatible con navegadores móviles como Safari.

CSS margin:0 auto no funcionará cuando el div tiene una propiedad position distinta de relative , como en el caso de position:absolute

¿Por qué necesitamos especificar el ancho?

No necesariamente margin:0 auto : puede ser margin: <whatever_vertical_margin_you_need> auto segundo siendo el margen horizontal.

¿Por qué text-align: center; está obsoleto?

Esto está lejos de ser una solución perfecta ya que cualquier cosa dentro del DIV interno debe mostrarse como un elemento de tabla.

votó la mayoría, pero no una mejor solución. la mejor manera de hacer esto es usar la combinación de div y span tag, block css property y cross browser inline-block, y el centro de texto hará el magin simple

Por qué esto no funciona si el elemento interno es button y no div .

Porque "input" es un elemento en línea y debe estar centrado por "text-align: center".

@Invierno text-align: center; no es obsoleto

@amachreetamunoemi ¿crees eso? entonces podrías preguntar con una mejor solución

No se puede centrar si no le da un ancho. De lo contrario, ocupará, de forma predeterminada, todo el espacio horizontal.

y si no conoces el ancho? ¿Diga porque el contenido es dinámico?

¿anchura máxima? que tal eso?

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

Configure el width y establezca margin-left y margin-right en auto . Sin embargo, eso es solo para horizontal . Si quieres ambas cosas, lo harías en ambas direcciones. No tenga miedo de experimentar; no es como si pudieras romper algo.

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

@SabaAhang, la sintaxis correcta para eso sería float: none; y probablemente solo sea necesaria porque #inner ha heredado un float de left o right desde otro lugar de su CSS.

Ésta es una buena solución. Solo tenga en cuenta que inner heredará text-align , por lo que es posible que desee establecer el text-align interno en initial o algún otro valor.

buena solución, creo que sí

Recientemente tuve que centrar un div "oculto" (es decir, display:none; ) que tenía un formulario en una tabla que necesitaba centrarse en la página. Escribí el siguiente código jQuery para mostrar el div oculto y luego actualicé el contenido CSS al ancho generado automáticamente de la tabla y cambié el margen para centrarlo. (El cambio de visualización se activa al hacer clic en un enlace, pero no era necesario mostrar este código).

NOTA: Estoy compartiendo este código, porque Google me trajo a esta solución de Stack Overflow y todo habría funcionado excepto que los elementos ocultos no tienen 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>  

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

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

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

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

https://jsfiddle.net/gjvfxxdj/

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


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

El principio sigue siendo el mismo; Pon el artículo en el medio y compensa el ancho.

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

margen izquierdo: automático; margen derecho: automático; centra un elemento a nivel de bloque

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. El simple hecho de 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).

Propiedad de alineación de caja de CSS 3

 #outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
  

Asegúrese de leer esta respuesta antes de comenzar a implementar esta solución.

Si no desea establecer un ancho fijo y no desea el margen adicional, agregue display: inline-block a su elemento.

Puede utilizar:

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

los mismos requisitos que la pantalla: inline-block también ( quirksmode.org/css/display.html)

También usé esto, pero nunca antes había encontrado display: table; . ¿Qué hace?

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

No es necesaria la propiedad de alineación de texto. Es completamente innecesario.

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éngala allí. (IE8 con las reglas de IE8 y las reglas de IE7 funcionan sin alineación de texto, por lo que es posible que solo se trate de IE6 y anteriores)

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 facilidad de uso, también puede utilizar las propiedades box-orient, box-flex, box-direction .

Flex :

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

Más información sobre cómo centrar los elementos secundarios

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

Asegúrese de leer esta respuesta antes de comenzar a implementar esta solución.

Safari, a partir de ahora, todavía requiere indicadores -webkit para flexbox (display: -webkit-flex; y -webkit-align-items: center; y -webkit-justify-content: center; )

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

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

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

Avatar Ray

Centrado: márgenes de ancho automático

Este cuadro se centra horizontalmente estableciendo los anchos de los márgenes derecho e izquierdo en "automático". Esta es la forma preferida de lograr el centrado horizontal con CSS y funciona muy bien en la mayoría de los navegadores compatibles con CSS 2. Desafortunadamente, Internet Explorer 5 / Windows no responde a este método, una deficiencia de ese navegador, no la técnica.

Existe una solución sencilla. (Una pausa mientras luchas contra las náuseas inducidas por esa palabra.) ¿Listo? Internet Explorer 5 / Windows aplica incorrectamente el atributo CSS "text-align" a elementos de nivel de bloque. Declarar "text-align: center" para el elemento a nivel de bloque que lo contiene (a menudo el elemento BODY) centra horizontalmente el cuadro en Internet Explorer 5 / Windows.

Existe un efecto secundario de esta solución alternativa: el atributo CSS "text-align" se hereda, centrando el contenido en línea. A menudo es necesario establecer explícitamente el atributo "text-align" para el cuadro centrado, contrarrestando los efectos de la solución alternativa de Internet Explorer 5 / Windows. A continuación, se muestra el CSS correspondiente.

body {
    margin: 50px 0px;
    padding: 0px;
    text-align: center;
}

#Content {
    width: 500px;
    margin: 0px auto;
    text-align: left;
    padding: 15px;
    border: 1px dashed #333;
    background-color: #EEE;
}
 

http://bluerobot.com/web/css/center1.html

Eso no es centrar el div, eso es centrar el texto.

La forma en que suelo hacerlo 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.

Es posible que esto no funcione si tiene otros divs debajo del div centrado.

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

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

Así que solo para completar, aquí está la última forma de centrarse en CSS 3 usando 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 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 antiguos que utilizan una sintaxis anterior para flexbox, aquí es un buen lugar para buscar .

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

La especificación Flexbox ha pasado por 3 revisiones importantes. El borrador más reciente es de septiembre de 2012, que oficialmente desaprueba todos los borradores anteriores. Sin embargo, la compatibilidad del navegador es irregular (en particular, los navegadores Android antiguos): stackoverflow.com/questions/15662578/…

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

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

@WouterVanherck depende del valor de flex-direction . 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 el alineamiento vertical.

Recientemente encontré un enfoque:

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

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

Ambos elementos deben tener el mismo ancho para funcionar correctamente.

Simplemente configure esta regla solo para #inner : #inner { position:relative; left:50%; transform:translateX(-50%); } . Esto funciona para cualquier ancho.

He aplicado el estilo en línea al div interno. Utilice este:

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
 

Uso:

 #outerDiv {
  width: 500px;
}

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

He creado este ejemplo para mostrar cómo verticalmente 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 permanecerá en el center incluso cuando redimensiones tu pantalla.

+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 la 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 con más soporte para centrar elementos vertical y / u horizontalmente.

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

Creo que para que este método funcione, debes establecer el valor y la altura del div interno

Utilice el siguiente contenido CSS para #inner div:

#inner {
  width: 50%;
  margin-left: 25%;
}
 

Utilizo principalmente este contenido CSS para centrar div s.

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á el #inner verticalmente. Si no lo desea, elimine las propiedades display y vertical-align ;

Chris Coyier, quien escribió una excelente publicación sobre "Centrado en el Desconocido 'en su blog. Es un resumen de múltiples soluciones. Publiqué uno que no está publicado en esta pregunta. Tiene más compatibilidad con el navegador que la solución Flexbox y no estás usando display: table; que podría romper otras cosas.

 

Algo bueno que encontré recientemente, mezclando el uso de line-height+vertical-align y el truco de 50% izquierdo, puedes center un cuadro de tamaño dinámico dentro de otro cuadro de tamaño dinámico, tanto en horizontal como en vertical usando CSS puro.

Tenga en cuenta que debe usar intervalos (y inline-block ), probados en navegadores modernos + Internet Explorer 8. HTML:

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>
 

<×CSS:

.container
{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    overflow: hidden;
}
.center
{
    position: absolute;
    left: 50%; top: 50%;
}
.center-container
{
    position: absolute;
    left: -2500px; top: -2500px;
    width: 5000px; height: 5000px;
    line-height: 5000px;
    text-align: center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background: red;
    color: white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background: white;
    color: red;
}
 

Vea el ejemplo aquí .

Intenta jugar con

margin: 0 auto;
 

Si también desea centrar su texto, intente usar:

text-align: center;
 

text-align funciona para la alineación del texto en su contenedor, no para su contenedor con su padre.

Existía una opción que encontré:

Todo el mundo dice que use:

margin: auto 0;
 

Pero hay otra opción. Establezca esta propiedad para el div padre. Eso 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 */
}
 

text-align funciona para la alineación del texto en su contenedor, no para su contenedor con su padre.

Lo pruebo, tengo un problema con establecer el niño en el centro, debe cuando tienes más un niño, más veces el margen: 0 respuesta de fuente automática, pero, centro de alineación de texto, para el padre, haz que este niño sea el centro, incluso si son elementos y no ser texto, probar y ver que pasa

texto-alinear texto central solamente. Tiene razón en este momento, pero cuando escribe un contenedor css que contiene un niño con diferente ancho y color, su código no funciona. Pruébelo de nuevo !!!!

Vea este ejemplo jsfiddle.net/uCdPK/2 y dígame qué piensa al respecto. !!!

<center>
 

¿Estoy mimado con el centro más simple que se conoce?

</center>
 

Esto funcionó para mí y no estoy seguro de por qué no es la respuesta. ¿Alguien puede explicar qué hay de malo en esto?

@DaveWalley, aunque funciona, hay 2 buenas razones por las que esta no es una buena respuesta. Primero, la pregunta era para una solución CSS y esta es una solución HTML pura. Segundo la etiqueta CENTER ya estaba obsoleta en HTML 4

Por ejemplo, consulte este vínculo 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, su 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>
 

Luego, vea este ejemplo sobre violín .

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 ha establecido un 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. Proceda de la siguiente manera:

  1. Envuelva .inner dentro de .center-helper
  2. Convierta .center-helper en un bloque en línea; adquiere el mismo tamaño que .inner , por lo que tiene un ancho de 300 píxeles.
  3. Presione .center-helper 50% a la derecha en relación con su padre; esto coloca su izquierda en 500 píxeles wrt. exterior.
  4. Empuje .inner 50% a la izquierda en relación con su padre; esto coloca su izquierda en -150 píxeles wrt. ayudante central, lo que significa que su izquierda está en 500 - 150 = 350 píxeles wrt. exterior.
  5. Establezca el desbordamiento en .outer en oculto para evitar la barra de desplazamiento horizontal.

Demostració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>  

Esto es lo que quiere de la forma más breve.

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

Eso lo centra verticalmente.

Bueno, logré encontrar una solución que quizás 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 utilizarlo 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);
  })
});
 

Sé que llego un poco tarde a responder esta pregunta y no me he molestado en leer todas las respuestas, por lo que puede ser un duplicado. Aquí está mi opinión :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
 

Sí, creo que esto es un duplicado. La respuesta principal de Justin Poliey ha resuelto el problema de la misma manera.

Centrado de un 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>  

Experimente más en Codepen o en JSBin .

Pruebe esto:

<div id="a">
    <div id="b"></div>
</div>
 

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}
 

La forma más sencilla:

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

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

#outer no necesita ningún width:100%; ya que el <div> por defecto siempre tiene width:100% . y text-align:center tampoco es necesario en absoluto.

Solo uso la solución más simple, pero funciona en todos los navegadores:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>
 

Si alguien quisiera una solución jQuery para alinear en el centro estos divs:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
 

En primer lugar: debe asignar un ancho al segundo div:

Por ejemplo:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>
 

CSS:

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

Tenga en cuenta que si no le da un ancho, ocupará todo el ancho de la línea.

En lugar de múltiples envoltorios y / o márgenes automáticos, esta sencilla solución me funciona:

<div style="top: 50%; left: 50%;
    height: 100px; width: 100px;
    margin-top: -50px; margin-left: -50px;
    background: url('lib/loading.gif') no-repeat center #fff;
    text-align: center;
    position: fixed; z-index: 9002;">Loading...</div>
 

Coloca el div en el centro de la vista (vertical y horizontal), ajusta el tamaño y ajusta el tamaño, centra la imagen de fondo (vertical y horizontal), centra el texto (horizontal) y mantiene div en la vista y encima de el contenido. Simplemente colóquelo en el body HTML y disfrute.

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}
 

El truco es que translateX(-50%) coloca el elemento #inner 50 por ciento a la izquierda de su propio ancho. Puede utilizar el mismo truco para la alineación vertical.

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

Hay más información en Red de desarrolladores de Mozilla .

Es posible que también se necesiten 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);

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

Gracias por intentar ayudar al OP :). No debe agregar respuestas que sean exactamente iguales a las respuestas ya proporcionadas. Supongo que la colisión es un error, pero esto podría haberse copiado y pegado completamente de la respuesta aceptada.

Pruebe esto:

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}
 

#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top: -20px; /* Half of your height */
}
 

Dependiendo de sus circunstancias, la solución más sencilla podría ser:

margin: 0 auto; float: none;
 

Sí, este es un código corto y limpio para la alineación horizontal.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}
 

Estoy compartiendo esta respuesta para los diseñadores que desean alinear su contenido tanto horizontal como verticalmente. O puede decir en el centro de la página web. Vaya a este sitio para descargar el archivo.

Código CSS

.ver-hor-div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
 

La mejor manera es usar la visualización de celda de tabla (interior) que viene exactamente después de un div con la tabla de visualización (exterior) y establecer la alineación vertical para el div interior (con visualización de celda de tabla) y cada etiqueta que usa en el div interno colocado en el centro de div o página.

Nota: debe establecer una altura específica en exterior

Es la mejor manera de saberlo sin posición relativa o absoluta, y puede usarlo en todos los navegadores de la misma manera.

 #outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}  
 <div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>  

Centrado solo horizontalmente

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

El contenedor:

  • debe tener text-align: center;

El cuadro de contenido:

  • debe tener display: inline-block;

Demostració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>  

¡Consulta también este violín !


Centrado tanto horizontal como verticalmente

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

El contenedor exterior:

  • debe tener display: table;

El contenedor interior:

  • debe tener display: table-cell;
  • debe tener vertical-align: middle;
  • debe tener text-align: center;

El cuadro de contenido:

  • debe tener display: inline-block;

Demostració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>  

¡Consulta también este violín !

Es tan simple.

Simplemente decida qué ancho quiere darle al div interno y use el siguiente CSS.

CSS

.inner{
  width: 500px; /* Assumed width */
  margin: 0 auto;
}
 

Avatar Qmr

 <div id="outer" style="width:100%;margin: 0 auto; text-align: center;">  
  <div id="inner">Foo foo</div>
</div>  

Después de leer todas las respuestas, no vi la que prefiero. Así es como puedes centrar un elemento en otro.

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.trueCenter
{
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}
 

HTML:

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

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}
 

Fiddle .

Agregar text-align:center; al div principal

#outer {
    text-align: center;
}
 

https://jsfiddle.net/7qwxx9rs/

o

#outer > div {
    margin: auto;
    width: 100px;
}
 

https://jsfiddle.net/f8su1fLz/

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 <div> interno, la única condición es que su height y width no deben ser más grandes que los de su contenedor.

Puede lograr esto utilizando CSS Flexbox . Solo necesita aplicar 3 propiedades al elemento principal para que todo funcione.

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

Eche un vistazo al código a continuación, esto le hará comprender mucho mejor las propiedades.

Obtenga más información sobre CSS Flexbox

 #outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }  
 <div id="outer">  
  <div id="inner">Foo foo</div>
</div>  

Asigne algo de width al div interno y agregue margin:0 auto; en la propiedad CSS.

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

solo agregue el centro de alineación de texto en su div principal (externo) para que la clase de sus hijos tome ese css automáticamente

Puede utilizar CSS Flexbox .

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

Puede obtener más información al respecto en este enlace: https: //css-tricks.com/snippets/css/a-guide-to-flexbox/

Agregue una explicación sobre qué tecnologías está utilizando y cómo funciona. Un enlace de referencia estaría bien.

Es posible usando CSS 3 Flexbox . Tiene dos métodos cuando usa Flexbox.

  1. Establezca el display:flex; principal y agregue propiedades {justify-content:center; ,align-items:center;} a su elemento principal.

         #outer{
          display: flex;
          justify-content: center;
          align-items: center;
          }  
         <div id="outer" style="width:100%">
          <div id="inner">Foo foo</div>
        </div>  

  2. Establezca el display:flex padre y agregue margin:auto; al hijo.

         #outer{
          display: flex;
        }
        #inner{
          margin: auto;
        }  
         <div id="outer" style="width:100%">
          <div id="inner">Foo foo</div>
        </div>  

Agrega CSS a tu div interno. Establezca margin: 0 auto y establezca su ancho menor al 100%, que es el ancho del div exterior.

<div id="outer" style="width:100%"> 
    <div id="inner" style="margin:0 auto;width:50%">Foo foo</div> 
</div>
 

Esto dará el resultado deseado.

¿En qué se diferencia esto de las muchas otras respuestas que parecen hacer lo mismo?

<×CSS

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

<×HTML

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>
 

<div id="outer" style="width:100%">  
  <div id="inner" style="text-align:center">Foo foo</div>
</div>
 

La respuesta más sencilla: agregue margin: auto; al interno.

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

Código CSS

.outer{
    width: 100%;
    height: 300px;
    background: yellow;
}

.inner{
    width: 30%;
    height: 200px;
    margin: auto;
    background: red;
    text-align: center
}
 

Consulte mi enlace CodePen : http://codepen.io/feizel/pen/QdJJrK

 Introduzca aquí la descripción de la imagen

Simplemente Margin:0px auto :

 #inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}  
 <div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>  

CSS 3:

Puede utilizar el siguiente estilo en el contenedor principal para distribuir los elementos secundarios de manera uniforme y horizontal:

display: flex;
justify-content: space-between;  // <-- space-between or space-around
 

Una buena DEMO sobre el valores diferentes para justify-content .

 Introduzca aquí la descripción de la imagen

CanIUse: compatibilidad con navegadores

¡Pruébelo !:

 #containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}  
 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>  

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

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

También se puede centrar horizontal y verticalmente utilizando un posicionamiento absoluto, como este:

#outer{
    position: relative;
}

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

Utilice el siguiente código.

HTML

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

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}
 

La forma más conocida que se usa ampliamente y funciona en muchos navegadores , incluidos los antiguos, es usar margin como se muestra a continuación:

 #parent {
  width: 100%;
  background-color: #CCCCCC;
}

#child {
  width: 30%; /* We need the width */
  margin: 0 auto; /* This does the magic */
  color: #FFFFFF;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}  
 <div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>  

Ejecute el código para ver cómo funciona. Además, hay dos cosas importantes que no debe olvidar en su CSS cuando intente centrar de esta manera: margin: 0 auto; . Eso lo convierte en el centro div como se quería. Además, no olvide width del niño, de lo contrario, no se centrará como se esperaba.

Puede usar una línea de código, solo text-align:center .

Aquí tienes un ejemplo:

 #inner {
  text-align: center;
  }  
 <div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>  

Lo siento, pero este bebé de la década de 1990 simplemente funcionó para mí:

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

¿Me voy al infierno por este pecado?

La etiqueta <center> está obsoleta desde HTML4, como Idra explicado en los comentarios

@ Garric15 Solo estoy tratando de alentar a algunas personas que tal vez sigan perdiendo horas y horas de trabajo por resolver un problema muy pequeño solo porque no quieren usar una etiqueta obsoleta como

a pesar de que sigue funcionando perfectamente bien en algunos casos. La etiqueta
quedó obsoleta, pero nada tan simple y eficaz como para reemplazarla decentemente en todos los casos.

Puede utilizar el enlace https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p= vista previa

.outer{
      display: table;
      width: 100%;
      height: 100%;
}
.inner {
    vertical-align: middle;
}
 

Consulte https://v4-alpha.getbootstrap.com/examples/cover/

El segundo vínculo parece estar (efectivamente) roto.

Puede agregar este código:

 #inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}  
 <div id="outer">  
  <div id="inner">Foo foo</div>
</div>  

Centrar un div en un div

 .outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}  
 <div class="outer">  
  <div class="inner">Foo foo</div>
</div>  

¡Gracias por su respuesta! Si cree que su respuesta aporta algo valioso a la pregunta, asegúrese de explicar con más detalle su código y lo que hace y por qué funciona, ¡gracias!

esto funcionó para mí. la mayor parte del tiempo, el bloque de visualización y luego el margen automático para el div interno no funciona, pero con la pantalla flex en el div externo funcionó muy bien. muchas gracias. No he probado la pantalla flexible antes.

yo también. el uso de la mesa de visualización también es genial. mi otra respuesta. stackoverflow.com/questions/5703552/…

Podríamos usar la siguiente clase de CSS que permite centrar vertical y horizontalmente cualquier elemento contra su padre:

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

Uso:

<div id="parent">
  <div class="child"></div>
</div>
 

Estilo:

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

Si desea centrarlo horizontalmente, debe escribir lo siguiente:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
 

Puede utilizar el método calc. El uso es para el div que estás centrando. Si conoce su ancho, digamos que es de 1200 píxeles, elija:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}
 

Básicamente, agregará un margen izquierdo del 50% menos la mitad del ancho conocido.

Utilice este código:

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
 

Uso:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
 

Puedes hacerlo de otra manera. Vea los ejemplos a continuación:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}
 

Aquí hay otra forma de centrar horizontalmente con Flexbox y sin especificar ningún ancho para el contenedor interior. La idea es utilizar pseudo elementos que empujarán el contenido interno de derecha a izquierda.

El uso de flex:1 en un pseudo elemento hará que llenen los espacios restantes y tomen el mismo tamaño y el contenedor interno se centrará.

 .container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}  
 <div class="container">
  <div class="inner">
    Foo content
  </div>
</div>  

También podemos considerar la misma situación para la alineación vertical simplemente cambiando la dirección de flexión a columna:

 .container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}  
 <div class="container">
  <div class="inner">
    Foo content
  </div>
</div>  

Avatar Anu

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

Por favor, agregue también algunas explicaciones.

Avatar Anu

Los principales atributos para centrar el div son margin: auto y width: según los requisitos:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
 

Avatar Anu

Gracias por este fragmento de código, que puede proporcionar ayuda inmediata y limitada. Una explicación adecuada mejoraría enormemente su valor a largo plazo al mostrar por qué esta es una buena solución al problema, y ​​lo haría más útil para futuros lectores con otras preguntas similares. edite su respuesta para agregar alguna explicación, incluidas las suposiciones que ha hecho.

Esto centraliza su div interno horizontal y verticalmente:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}
 

Solo para alineación horizontal, cambie

margin: 0 auto;
 

y para vertical, cambie

margin: auto 0;
 

Puede usar display: flex para su div exterior y para centrar horizontalmente debe agregar justify-content: center

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

o puede visitar w3schools - Propiedad flexible de CSS para obtener más ideas.

 <!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
    <style>
    .outer{
          text-align: center;
           }
    .inner{
          width: 500px;
          margin: 0 auto;
          background: brown;
          color: red;
    }

</style>

  </head>

  <body>

    <div class="outer">
      <div class="inner">This DIV is centered</div>
    </div>

  </body>
</html>  

Intente esto. Funcionará sin la etiqueta central HTML.

Lo mejor que he usado en mis diversos proyectos es

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
 

enlace de violín

 #outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}  
 <div id="outer">
  <div id="inner">Foo foo</div>
</div>  

Una explicación estaría en orden.

Esto seguramente centrará su #inner tanto horizontal como verticalmente. Esto también es compatible con todos los navegadores. Acabo de agregar un estilo adicional solo para mostrar cómo está centrado.

 #outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
}   
 <div id="outer">  
  <div id="inner">Foo foo</div>
</div>  

Pero, por supuesto, si solo lo desea alineado horizontalmente, esto puede ayudarlo.

 #outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

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

Una de las formas más sencillas de hacerlo es utilizando display: flex . El div externo solo necesita tener display flex, y el interno necesita margin: 0 auto para que esté centrado horizontalmente.

Para centrar verticalmente y simplemente centrar un div dentro de otro div, consulte los comentarios de la clase .inner a continuación

 .wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}  
 <div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>  

Puede hacerlo utilizando Flexbox , que es una buena técnica en estos días.

Para usar Flexbox, debe proporcionar display: flex; y align-items: center; a su elemento div principal o #outer . El código debería ser así:

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

Esto debería centrar a su hijo o #inner div horizontalmente. Pero en realidad no puede ver ningún cambio. Debido a que nuestro div #outer no tiene altura o, en otras palabras, su altura se establece en auto, por lo que tiene la misma altura que todos sus elementos secundarios. Entonces, después de un poco de estilo visual, el código de resultado debería ser así:

 #outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}  
 <div id="outer">
  <div id="inner">Foo foo</div>
</div>  

Puede ver que el div #inner ahora está centrado. Flexbox es el nuevo método de posicionar elementos en pilas horizontales o verticales con CSS y tiene el 96% de compatibilidad de navegadores globales. Por lo tanto, puede usarlo y, si desea obtener más información sobre Flexbox, visite Trucos CSS . En mi opinión, ese es el mejor lugar para aprender a usar Flexbox.

div{
    width: 100px;
    height: 100px;
    margin: 0 auto;
}
 

Para lo normal si estás usando div de forma estática.

Si desea que un div esté centrado cuando div es absoluto para su padre, aquí hay un ejemplo:

.parentdiv{
    position: relative;
    height: 500px;
}

.child_div{
   position: absolute;
   height: 200px;
   width: 500px;
   left: 0;
   right: 0;
   margin: 0 auto;
}
 

Esto funcionó para mí:

#inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}
 

En este código, debe determinar el ancho del elemento.

Encontré una forma similar con margin-left , pero también puede ser left .

#inner {
    width: 100%;
    max-width: 65px; /* To adapt to screen width. It can be whatever you want. */
    left: 65px; /* This has to be approximately the same as the max-width. */
}
 

Una respuesta muy simple y en varios navegadores al centro horizontal es aplicar esta regla al elemento principal:

 .parentBox {
    display: flex;
    justify-content: center
}
  

 .outer
{
  background-color: rgb(230,230,255);
  width: 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}  
 <div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>  

Re "width 100%; ": ¿Quiere decir "width: 100%; "?

¡Hágalo simple!

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

Una explicación estaría en orden.

Simplemente puede usar Flexbox de esta manera:

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

Aplicar Autoprefixer para todos los navegadores compatibles:

#outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}
 

O bien

Utilice transformar :

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

Con Autoprefixer:

#inner {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform:     translate(-50%);
    transform:         translate(-50%)
}
 

Para un DIV centrado horizontalmente:

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

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

utilizar css anterior para centrar la alineación div

¡Hola! Esta respuesta apareció en la revisión como de baja calidad debido a su longitud y contenido. Esto sucede porque las respuestas de solo código generalmente se desaconsejan en SO y deben ir acompañadas de alguna explicación de texto de cómo el código es una solución a la pregunta. ¡Gracias!

Una explicación estaría en orden.

Podemos usar Flexbox para lograr esto realmente fácilmente:

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

Centre un div dentro de un div horizontalmente :

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

 Introduzca aquí la descripción de la imagen

Centre un div dentro de un div verticalmente :

#outer {
    display: flex;
    align-items: center;
}
 

 Introduzca aquí la descripción de la imagen

Y, para centrar completamente el div vertical y horizontalmente:

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

 Introduzca aquí la descripción de la imagen

Puede agregar otro div que tenga el mismo tamaño de #inner y moverlo hacia la izquierda en un -50% (la mitad del ancho de #inner) y #inner en un 50%.

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

#inner > div {
    position: relative;
    left: -50%;
}  
 <div id="outer">
  <div id="inner"><div>Foo foo</div></div>
</div>  

Pon un texto que muestre lo que hiciste y por qué lo hiciste.

Una de las formas más fáciles ...

<!DOCTYPE html>
<html>
    <head>
        <style>
            #outer-div {
                width: 100%;
                text-align: center;
                background-color: #000
            }
            #inner-div {
                display: inline-block;
                margin: 0 auto;
                padding: 3px;
                background-color: #888
            }
        </style>
    </head>

    <body>
       <div id ="outer-div" width="100%">
           <div id ="inner-div"> I am a easy horizontally centered div.</div>
       <div>
    </body>
</html>
 

Este es el mejor ejemplo para centrar horizontalmente un

 #outer {
    display: flex;
    align-items: center;
    justify-content: center;
}  
 <!DOCTYPE html>
<html>
    <head>

    </head>

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

Si tiene un padre de cierta altura, diga body{height: 200px} o como el de abajo tiene div principal # exterior con una altura de 200px, luego agregue contenido CSS como se muestra a continuación

HTML:

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

CSS:

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}
 

Luego, el contenido infantil, digamos contenido centrado en div #, estará vertical u horizontalmente en el medio, sin usar ninguna posición CSS. Para eliminar el comportamiento verticalmente intermedio, simplemente modifíquelo al siguiente código CSS:

#centered {
  margin: 0px auto;
}
 

o

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

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

Demostración: https://jsfiddle.net/jinny/p3x5jb81/5/

Para agregar solo un borde para mostrar que el div interno no es 100% por defecto:

 #outer{
  display: flex;
  width: 100%;
  height: 200px;
  border: 1px solid #000000;
}
#centered {
  margin: auto;
  border: 1px solid #000000;
}  
 <div id="outer">
  <div id="centered">Foo foo</div>
</div>  

DEMO: http://jsfiddle.net/jinny/p3x5jb81/9

si miras jsfiddle.net/jinny/p3x5jb81/9 , acabo de agregar un borde a mostrar que en mi caso div centrado no es 100%, toma el tamaño / longitud del contenido del texto. Si el texto centrado tiene una longitud de contenido mayor que el div externo de lo que estoy de acuerdo, debemos darle un ancho al div interno. Pero mi solución es compatible con el caso de muestra dado.

Simplemente agregue este contenido CSS en su archivo CSS. Centrará automáticamente el contenido.

Alinear horizontalmente para centrar en CSS:

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

Alinear verticalmente + horizontal al centro en CSS:

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

Esto funcionó para mí para centrar los botones de Datatables.

Con Sass (sintaxis SCSS) puede hacer esto con un mixin :

Con translate

// Center horizontal mixin
@mixin center-horizontally {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}
 

En una etiqueta HTML:

<div class="center-horizontally">
    I'm centered!
</div>
 

Recuerde agregar position: relative; al elemento HTML principal.


Con Flexbox

Con flex , puede hacer esto:

@mixin center-horizontally {
  display: flex;
  justify-content: center;
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}
 

En una etiqueta HTML:

<div class="center-horizontally">
    <div>I'm centered!</div>
</div>
 

Pruebe este CodePen .

He utilizado Flexbox o cuadrícula CSS

  1. Caja flexible

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

  2. Cuadrícula CSS

     #outer {
        display: inline-grid;
        grid-template-rows: 100px 100px 100px;
        grid-template-columns: 100px 100px 100px;
        grid-gap: 3px;
    }  

Puede resolver el problema de muchas formas.

En los ejemplos anteriores, dijeron con margin: 0 auto , display:table y otras respuestas como "con transformar y traducir".

¿Y qué tal solo con una etiqueta? Todo el mundo sabe que hay una etiqueta <center> que simplemente no es compatible con HTML5. Pero funciona en HTML5. Por ejemplo, en mis proyectos anteriores.

Y está funcionando, pero ahora no solo MDN Web Docs, sino también otros sitios web aconsejando no usarlo más. Aquí, en ¿Puedo usar puede ver notas de MDN Web Docs. Pero sea lo que sea, existe tal manera. Esto es solo para saber. Siempre ser notado sobre algo es muy útil.

 Introduzca aquí la descripción de la imagen

<center> es solo una etiqueta predefinida, no ajustable, no flexible como en CSS. Todavía funciona, pero esos son uno de los últimos restos vivos como y . En desuso no significa que no funcionará más en el futuro ... también significa que las nuevas tecnologías, ya sea a través del nodo reaccionan usando JSX u otros MVC complejos que generan DOM virtuales, podrían no ser completamente capaces de funcionar. El hecho de que sigan funcionando en HTML5 a pesar de no ser compatibles significa que w3c ya no lo mantiene. También SEO: los sitios web con HTML obsoleto pueden señalar a los motores de búsqueda con código desactualizado que podría dañar su clasificación.