html - vertical - centrar texto css
Centrar verticalmente un div dentro de otro div (23)
Quiero centrar un div que se agrega dentro de otro div.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
Este es el CSS que estoy usando actualmente.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
Como puede ver, el enfoque que utilizo ahora depende de los valores de ancho y alto de innerDiv . Si el ancho / alto cambia, tendré que modificar los valores de margin-top y margin-left ¿Existe alguna solución genérica que pueda? ¿Se usa para centrar el innerDiv siempre, independientemente de su tamaño?
Me di cuenta de que al usar margin:auto puede alinear horizontalmente el interiorDiv al medio. Pero, ¿qué pasa con el alineamiento vertical central?
Otra forma es usando Transform Translate
La División externa debe establecer su position en relative o fixed , y la División interna debe establecer su position en absolute , top e left al 50% y aplicar una transform: translate(-50%, -50%) .
div.cn {
position: relative;
width: 200px;
height: 200px;
background: gray;
text-align: center;
}
div.inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}
<div class="cn">
<div class="inner">
test
</div>
</div>
Probado en:
- Ópera 24.0 (mínimo 12.1)
- Safari 5.1.7 (mínimo 4 con prefijo -webkit)
- Firefox 31.0 (mínimo 3.6 con prefijo -moz-, desde 16 sin prefijo)
- Chrome 36 (mínimo 11 con prefijo -webkit-, desde 36 sin prefijo)
- IE 11, 10 (mínimo 9 con prefijo -ms-, desde 10 sin prefijo)
- Más navegadores, ¿Puedo usar?
Centrado verticalmente elementos div dentro de otro div
Simplemente configure el contenedor para display:table y luego los elementos internos para display:table-cell . Establezca una height en el contenedor y luego configure vertical-align:middle en los elementos internos. Esto tiene una amplia compatibilidad hasta los días de IE9.
Solo tenga en cuenta que la alineación vertical dependerá de la altura del contenedor principal.
.cn
{
display:table;
height:80px;
background-color:#555;
}
.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
</div>
Centrar verticalmente un div dentro de otro div
#outerDiv{
width: 500px;
height: 500px;
position:relative;
background-color: lightgrey;
}
#innerDiv{
width: 284px;
height: 290px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
background-color: grey;
}
<div id="outerDiv">
<div id="innerDiv"></div>
</div>
Cuando tu height no está establecida (auto); puedes darle a la división interna algo de relleno (superior e inferior) para que quede verticalmente en el centro:
<div>
<div style="padding-top:20px;padding-bottom:20px">
<!--content-->
</div>
</div>
En lugar de atarme en un nudo con CSS difícil de escribir y difícil de mantener (¡que también necesita una validación cuidadosa en todos los navegadores!) Me parece mucho mejor renunciar a CSS y utilizar en su lugar el HTML 1.0 maravillosamente simple:
<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" id="innerDiv">
</td>
</tr>
</table>
Esto logra todo lo que el póster original quería, y es robusto y fácil de mantener.
Esto funciona para mi Se puede definir el ancho y la altura del div exterior.
Aquí el código:
.outer {
position: relative;
text-align: center;
width: 100%;
height: 150px; // Any height is allowed, also in %.
background: gray;
}
.outer > div:first-child {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}
<div class="outer">
<div class="inner">
Put here your text or div content!
</div>
</div>
Fiddle Link < http://jsfiddle.net/dGHFV/2515/ >
Prueba esto
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid red;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 0px;
left:0px;
right:0px;
bottom:0px;
margin:auto;
border:1px solid green;
}
Otra forma de lograr este centrado horizontal y vertical es:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
( Reference )
Para alinear en el centro tanto vertical como horizontalmente:
#parentDiv{
display:table;
text-align:center;
}
#child {
display:table-cell;
vertical-align:middle;
}
Personalmente prefiero el truco de usar un pseudo elemento oculto para abarcar toda la altura del contenedor exterior y alinearlo verticalmente con el otro contenido. Chris Coyier tiene un buen artículo sobre la técnica. http://css-tricks.com/centering-in-the-unknown/ La gran ventaja de esto es la escalabilidad. No tienes que saber la altura del contenido o preocuparte por que crezca o se contraiga. Esta solución escala :).
Aquí hay un violín con todo el CSS que necesitará y un ejemplo de trabajo. http://jsfiddle.net/m5sLze0d/
.center:before {
content: ""; /* Adding Extra Space Above Element */
display: inline-block;
height: 100%;
margin-right: -0.3em;
vertical-align: middle;
}
.center_element {
display:inline-block;
float:none;
vertical-align:middle;
white-space:normal;
text-align:left;
}
Puede centrar la división vertical y horizontalmente en CSS usando flex;
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid #000;
margin:0 auto;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#innerDiv{
width: 284px;
height: 290px;
border:1px solid #eee;
}
Y el segundo es el siguiente;
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid #000;
}
#innerDiv{
max-width: 300px;
height: 200px;
background-color: blue;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
border:1px solid #000;
border-radius:4px;
}
Y el HTML resultante:
<div id="outerDiv">
<div id="innerDiv"></div>
</div>
Puedes hacer esto con un simple bloque javascript (jQuery).
CSS :
#outerDiv{
height:100%;
}
Javascript :
<script type="text/javascript">
$(document).ready(function () {
$("#innerDiv").css(''top'', ($(window).height() - $("#content").height()) / 2);
});
</script>
Sé que esa pregunta se creó hace un año ... De todos modos, gracias CSS3, puedes alinear verticalmente div en div (ejemplo, http://jsfiddle.net/mcSfe/98/ )
<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>
div
{
display:-moz-box;
-moz-box-align:center;
}
Si todavía no entendiste después de leer las maravillosas respuestas dadas anteriormente.
Aquí hay dos ejemplos simples de cómo puedes lograrlo.
.wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 400px;
height: 300px;
border: 1px solid #555;
}
.container {
display: inline-block;
text-align: left;
padding: 20px;
border: 1px solid #cd0000;
}
<div class="wrapper">
<div class="container">
Center align a div using "<strong>display: table-cell</strong>"
</div>
</div>
.wrapper {
display: flex;
justify-content: center;
width: 400px;
height: 300px;
border: 1px solid #555;
}
.container {
align-self: center;
padding: 20px;
border: 1px solid #cd0000;
}
<div class="wrapper">
<div class="container">
Centering a div using "<strong>display: flex</strong>"
</div>
</div>
Nota: Verifique la compatibilidad del navegador de la pantalla: table-cell y flex antes de usar las implementaciones mencionadas anteriormente.
Trate de alinear el elemento interior de esta manera:
top: 0;
bottom: 0;
margin: auto;
display: table;
y por supuesto:
position: absolute;
el centro de alineación de texto en el elemento principal, muestra el bloque en línea en el elemento secundario. Esto centrará casi todo lo que sea. Creo que se llama un "bloque flotante".
<div class="outer">
<div class="inner"> some content </div>
</div><!-- end outer -->
<style>
div.outer{
width: 100%;
text-align: center;
}
div.inner{
display: inline-block;
text-align: left
}
</style>
Esta es también una buena alternativa para float''s, ¡buena suerte!
para innerdiv que no especifica su valor de altura, no hay una solución css pura para hacerlo centrado verticalmente. Una solución javascript podría obtener el offsetHeight del div interno, luego calcular el style.marginTop.
La alineación vertical del medio funciona, pero tendrá que usar table-cell en su elemento primario y inline-block en inline-block en el secundario.
Esta solución no va a funcionar en IE6 y 7.
El tuyo es el camino más seguro para esos.
Pero como ha marcado su pregunta con CSS3 y HTML5, pensé que no le importaría utilizar una solución moderna.
La solución clásica (diseño de tabla)
Esta fue mi respuesta original. Todavía funciona bien y es la solución con el soporte más amplio. El diseño de la tabla afectará su rendimiento de representación, por lo que le sugiero que utilice una de las soluciones más modernas.
Probado en:
- FF3.5 +
- FF4 +
- Safari 5+
- Chrome 11+
- IE9 +
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
Solución moderna (transformar)
Dado que las transformaciones están bastante bien soportadas ahora hay una forma más fácil de hacerlo.
CSS
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
♥ mi solución moderna favorita (flexbox)
Comencé a usar flexbox más y más, también está bien soportado ahora. Es, de lejos, la forma más fácil.
CSS
.cn {
display: flex;
justify-content: center;
align-items: center;
}
Más ejemplos y posibilidades: Compara todos los métodos en una página.
Alinear verticalmente cualquier cosa con solo 3 líneas de CSS
HTML
<div class="parent-of-element">
<div class="element">
<p>Hello</p>
</div>
</div>
Mas simple
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
CSS
.parent-of-element {
position: relative;
height: 500px;
/* or height: 73.61% */
/* or height: 35vh */
/* or height: ANY HEIGHT */
}
.element {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
De acuerdo con shouldiprefix estos son los únicos prefijos que necesitas
También puede usar% como el valor para la propiedad ''height'' de .parent-of-element, siempre que el elemento primario del elemento tenga height o algún contenido que expanda su tamaño vertical.
Introduce la descripción de la imagen aquí 100% funciona
.div1{
height: 300px;
background: red;
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.div2{
background: green;
height: 100px;
width: 100%;
}
<div class="div1">
<div class="div2">
sdfd
</div>
</div>
Esto funcionará de regreso a IE6!
<!DOCTYPE html> se requiere en IE6! [forzará el modo estricto predeterminado de IE6 también].
(por supuesto, la caja para colorear es solo para fines de demostración)
#outer{
width: 205px;
height: 205px;
margin: auto;
text-align: center;
}
#inner{
text-align: left;
vertical-align: middle;
width: 120px;
height: 120px;
display: inline-block;
}
#center{
height: 100%; width:0px;
vertical-align: middle;
display: inline-block;
}
div {background: rgba(0,128,255,.6)}
<div id=outer>
<div id=center></div><div id=inner> The inner DIV
</div>
</div>
He estado usando la siguiente solución desde hace más de un año, también funciona con IE 7 y 8.
<style>
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
#outerDiv{
width: 500px;
height: 500px;
position:relative;
background:grey;
display:flex;
justify-content:center;
align-items:center;
}
#innerDiv{
background:cyan;
width: 284px;
height: 290px;
}
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>
Puedes hacerlo simplemente agregando el estilo css mencionado anteriormente. Todo lo mejor. para consulta escribe comentario