html - texto - Usando margin: auto para alinear verticalmente un div
centrar un div dentro de otro (11)
Dado que esta pregunta se realizó en 2012 y hemos recorrido un largo camino con el soporte del navegador para flexboxes, sentí que esta respuesta era obligatoria.
Si la pantalla de su contenedor principal es flex , entonces sí , margin: auto auto (también conocido como margin: auto ) trabajará para centrarlo tanto horizontal como verticalmente, independientemente de si se trata de un elemento en inline o de block .
#parent {
width: 50vw;
height: 50vh;
background-color: gray;
display: flex;
}
#child {
margin: auto auto;
}
<div id="parent">
<div id="child">hello world</div>
</div>
Tenga en cuenta que el ancho / alto no tiene que especificarse en forma absoluta, como en este ejemplo jfiddle que usa el tamaño relativo a la ventana gráfica .
Aunque el soporte de navegador para flexboxes está en su punto más alto en el momento de la publicación, muchos navegadores aún no lo admiten o requieren prefijos de proveedor. Consulte http://caniuse.com/flexbox para obtener información actualizada de soporte del navegador.
Actualizar
Dado que esta respuesta recibió un poco de atención, también me gustaría señalar que no necesita especificar ningún margin si está usando display: flex y desea centrar todos los elementos en el contenedor:
#parent {
width: 50vw;
height: 50vh;
background-color: gray;
display: flex;
align-items: center; /* horizontal */
justify-content: center; /* vertical */
}
<div id="parent">
<div>hello world</div>
</div>
Entonces sé que podemos centrar un div horizontalmente si usamos margin:0 auto; . En caso de margin:auto auto; ¿Cómo creo que debería funcionar? ¿Centrarlo verticalmente también?
¿Por qué no vertical-align:middle; trabajo tampoco?
.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
background:yellow;
width:200px;
margin:auto auto;
padding:10px;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>
Esas dos soluciones requieren solo dos elementos anidados.
Primero : posicionamiento relativo y absoluto si el contenido es estático (centro manual).
.black {
position:relative;
min-height:500px;
background:rgba(0,0,0,.5);
}
.message {
position:absolute;
margin: 0 auto;
width: 180px;
top: 45%; bottom:45%; left: 0%; right: 0%;
}
https://jsfiddle.net/GlupiJas/5mv3j171/
o para el diseño fluido , para el uso exacto del centro de contenido debajo del ejemplo en su lugar:
.message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
https://jsfiddle.net/GlupiJas/w3jnjuv0/
Necesita ''min-height'' en caso de que el contenido supere el 50% de la altura de la ventana. También puede manipular esta altura con la consulta de medios para dispositivos móviles y tabletas. Pero solo si juegas con diseño receptivo.
Supongo que podría ir más allá y usar un simple script de JavaScript / JQuery para manipular la altura mínima o la altura fija si es necesario por algún motivo.
En segundo lugar , si el contenido es fluido , también puede usar las propiedades de CSS de tabla y celda de tabla con alineación vertical y alineación de texto centrada:
/*in a wrapper*/
display:table;
y
/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;
Funciona y escala perfectamente, a menudo se utiliza como una solución de diseño web receptiva con diseños de cuadrícula y consulta de medios que manipulan el ancho del objeto.
.black {
display:table;
height:500px;
width:100%;
background:rgba(0,0,0,.5);
}
.message {
display:table-cell;
vertical-align: middle;
text-align: center;
}
https://jsfiddle.net/GlupiJas/4daf2v36/
Prefiero la solución de tabla para el centrado de contenido exacto, pero en algunos casos el posicionamiento absoluto relativo hará un mejor trabajo, especialmente si no queremos mantener la proporción exacta de alineación de contenido.
Esta es la mejor solución que he encontrado: http://jsfiddle.net/yWnZ2/446/ Funciona en Chrome, Firefox, Safari, IE8-11 y Edge.
Si tiene una height declarada ( height: 1em , height: 50% , etc.) o es un elemento donde el navegador conoce la altura ( img , svg o canvas por ejemplo), entonces todo lo que necesita para el centrado vertical es esto:
.message {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
Por lo general, deseará especificar un width o width max-width para que el contenido no se extienda a lo largo de la pantalla / contenedor.
Si está utilizando esto para un modal que desea que siempre esté centrado en la ventana gráfica superponiendo otro contenido, use position: fixed; para ambos elementos en lugar de position: absolute . http://jsfiddle.net/yWnZ2/445/
Aquí hay una descripción más completa: http://codepen.io/shshaw/pen/gEiDt
Ninguna de las soluciones en esta página funciona (para mí).
Mi solución
Html
<body>
<div class="centered">
</div>
</body>
CSS
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
No hay una sola manera fácil de centrar verticalmente, lo que haría el truco en cada situación.
Sin embargo, hay muchas formas de hacerlo, dependiendo de la situación.
Aquí hay algunos de ellos:
- Establezca el relleno superior e inferior del elemento principal, por ejemplo, relleno: 20px 0px 20px 0px
- Use la tabla, la celda de la tabla centra su contenido verticalmente
- Establezca la posición relativa del elemento parental y el div que desea centrar verticalmente en absoluto y estilícelo como superior: 50px; abajo: 50px; por ejemplo
También puede google para "css vertical centering"
Sé que la pregunta es de 2012, pero encontré la forma más fácil y la quería compartir.
HTML:
<div id="parent">
<div id="child">Content here</div>
</div>
y CSS:
#parent{
height: 100%;
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
Usando Flexbox:
HTML:
<div class="container">
<img src="http://lorempixel.com/400/200" />
</div>
CSS:
.container {
height: 500px;
display: flex;
justify-content: center; /* horizontal center */
align-items: center; /* vertical center */
}
altura variable, margen superior e inferior automático
.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
altura variable, margen superior e inferior automático
No puedes usar:
vertical-align:middle porque no es aplicable a elementos de nivel de bloque
margin-top:auto y margin-bottom:auto porque sus valores usados se calcularían como cero
margin-top:-50% porque los valores de margen basados en porcentajes se calculan en relación con el ancho del bloque contenedor
De hecho, la naturaleza del flujo de documentos y los algoritmos de cálculo de la altura del elemento hacen que sea imposible usar márgenes para centrar un elemento verticalmente dentro de su elemento primario. Cada vez que se cambia el valor de un margen vertical, se desencadenará un nuevo cálculo de altura del elemento padre (re-flow), que a su vez desencadenaría un recentrado del elemento original ... convirtiéndolo en un ciclo infinito.
Puedes usar:
Algunas soluciones como esta que funcionan para su escenario; los tres elementos tienen que ser anidados así:
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.helper {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.content {
#position: relative;
#top: -50%;
margin: 0 auto;
width: 200px;
border: 1px solid orange;
}
<div class="container">
<div class="helper">
<div class="content">
<p>stuff</p>
</div>
</div>
</div
JSFiddle funciona bien de acuerdo con Browsershot.
Si conoce la altura del div que desea centrar , puede colocarlo absolutamente dentro de su elemento primario y luego establecer el valor top en 50% . Eso colocará la parte superior de la div secundaria un 50% más baja que su padre, es decir, muy baja. Tírelo hacia arriba ajustando su margin-top a la mitad de su altura. Así que ahora tienes el punto medio vertical del niño div sentado en el punto medio vertical del padre - ¡centrado verticalmente!
Ejemplo:
.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
background:yellow;
width:200px;
margin:auto auto;
padding:10px;
position: absolute;
top: 50%;
margin-top: -25px;
height: 50px;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>
.black {
display:flex;
flex-direction: column;
height: 200px;
background:grey
}
.message {
background:yellow;
width:200px;
padding:10px;
margin: auto auto;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>