otro - centrar texto verticalmente en celda html




Centrar verticalmente un div dentro de otro div (16)

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?

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?


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>


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.


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 )


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>

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.

Usando display: table-cell

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

Utilizando flex-box (display: flex)

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


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.


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.



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







css3