html - texto - ¿Cómo centrar un elemento horizontal y verticalmente?
centrar texto vertical y horizontal css (13)
A continuación se muestra el enfoque de la caja flexible para obtener el resultado deseado
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flex-box approach</title>
<style>
.tabs{
display: -webkit-flex;
display: flex;
width: 500px;
height: 250px;
background-color: grey;
margin: 0 auto;
}
.f{
width: 200px;
height: 200px;
margin: 20px;
background-color: yellow;
margin: 0 auto;
display: inline; /*for vertically aligning */
top: 9%; /*for vertically aligning */
position: relative; /*for vertically aligning */
}
</style>
</head>
<body>
<div class="tabs">
<div class="f">first</div>
<div class="f">second</div>
</div>
</body>
</html>
Estoy tratando de centrar el contenido de mis pestañas verticalmente, pero cuando agrego la display:inline-flex estilo css display:inline-flex , desaparece la alineación horizontal de texto.
¿Cómo puedo hacer ambas alineaciones de texto x e y para cada una de mis pestañas?
* { box-sizing:border-box; }
#leftFrame {
background-color:green;
position:absolute;
left:0;
right:60%;
top:0;
bottom:0;
}
#leftFrame #tabs {
background-color:red;
position:absolute;
top:0;
left:0;
right:0;
height:25%;
}
#leftFrame #tabs div {
border:2px solid black;
position:static;
float:left;
width:50%;
height:100%;
text-align:center;
display: inline-flex;
align-items: center;
}
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
Ejecute este fragmento de código y vea un div alineado vertical y horizontalmente.
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
Grid css enfoque
#wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.main {
background-color: #444;
}
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box main"></div>
</div>
La mejor manera de centrar una caja tanto vertical como horizontalmente, es usar dos contenedores:
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; - debe ajustar la alineación horizontal del texto, a menos que desee centrar el texto
Demostración:
body {
margin : 0;
}
.outer-container {
display: table;
width: 80%;
height: 120px;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
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>
Véase también este violín !
Centrado en el centro de la página:
Para centrar su contenido en el medio de su página, agregue lo siguiente a su contenedor externo:
-
position : absolute; -
width: 100%; -
height: 100%;
Aquí hay una demo para eso:
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
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>
Véase también este violín !
La solución más simple y limpia para mí es usar la propiedad "transformación" de CSS3:
.container {
position: relative;
}
.container a {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
<div class="container">
<a href="#">Hello world!</a>
</div>
Otro enfoque es utilizar tabla:
<div style="border:2px solid #8AC007; height:200px; width:200px;">
<table style="width:100%; height:100%">
<tr style="height:100%">
<td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
</tr>
</table>
</div>
Para centrar la división en una página, verifique el enlace del violín.
#vh {
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 200px;
height: 200px;
background: white;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div id="vh">Div to be aligned vertically</div>
Actualizar Otra opción es usar el recuadro flexible, marcar el enlace de violín
.vh {
background-color: #ddd;
height: 200px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
Para centrar vertical y horizontalmente un elemento, también podemos utilizar las propiedades mencionadas a continuación.
Esta propiedad CSS alinea los elementos verticalmente y acepta los siguientes valores:
inicio flexible : los artículos se alinean con la parte superior del contenedor.
extremo flexible : los artículos se alinean con la parte inferior del contenedor.
Centro : los artículos se alinean en el centro vertical del contenedor.
línea base : los elementos se muestran en la línea base del contenedor.
estirar : los artículos se estiran para adaptarse al contenedor.
Esta propiedad CSS justifica el contenido , que alinea los elementos horizontalmente y acepta los siguientes valores:
inicio flexible : los artículos se alinean con el lado izquierdo del contenedor.
extremo flexible : los artículos se alinean con el lado derecho del contenedor.
Centro : los artículos se alinean en el centro del contenedor.
espacio intermedio : los elementos se muestran con el mismo espaciado entre ellos.
espacio alrededor : los elementos se muestran con el mismo espacio a su alrededor.
Si CSS3 es una opción (o si tiene un respaldo), puede usar la transformación:
.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}
A diferencia del primer enfoque anterior, no desea usar izquierda: 50% con la traducción negativa porque hay un error de desbordamiento en IE9 +. Utilice un valor correcto y no verá barras de desplazamiento horizontales.
Simplemente haga arriba, abajo, izquierda y derecha a 0.
<html>
<head>
<style>
<div>
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div> I am in the middle</div>
</body>
</html>
.align {
display: flex;
width: 400px;
height: 400px;
border: solid 1px black;
align-items: center;
justify-content: space-around;
}
.align div:first-child {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
.align div {
width: 20px;
height: 20px;
background-color: blue;
}
<div class=''align''>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
El primer niño se alineará verticalmente y horizontalmente en el centro
- Enfoque 6
/*Change units to "%", "px" or whatever*/
#wrapper{
width: 50%;
height: 70vh;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#left{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
background: red;
}
#right{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: green;
}
.txt{
text-align: center;
line-height: 50vh;
}
<div id="wrapper">
<div id="left" class="txt">Left</div>
<div id="right" class="txt">Right</div>
</div>
.container{
width: 50%; //Your container width here
height: 50%; //Your container height here
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Enfoque 1 -
transformtranslateX/translateY:Ejemplo aquí / Ejemplo de pantalla completa
En los navegadores compatibles (la mayoría de ellos), puede usar
top: 50%/left: 50%en combinación contranslateX(-50%) translateY(-50%)para centrar dinámicamente verticalmente / horizontalmente el elemento.
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I''m vertically/horizontally centered!</span>
</div>
Enfoque 2 - Método Flexbox:
Ejemplo aquí / Ejemplo de pantalla completa
En los navegadores compatibles , configure la
displaydel elemento objetivo paraflexy usar elementos dealign-items: centerpara centrado vertical yjustify-content: centerpara centrado horizontal. Simplemente no olvide agregar prefijos de proveedores para soporte adicional del navegador ( ver ejemplo ).
html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<div class="container">
<span>I''m vertically/horizontally centered!</span>
</div>
Enfoque 3 -
table-cell/vertical-align: middle:Ejemplo aquí / Ejemplo de pantalla completa
En algunos casos, deberá asegurarse de que la altura del elemento
html/bodyesté establecida en100%.Para la alineación vertical, establezca el
width/heightdel elemento principal en100%y agreguedisplay: table. Luego, para el elemento hijo, cambie ladisplayatable-celly agreguevertical-align: middle.Para el centrado horizontal, puede agregar
text-align: centerpara centrar el texto y cualquier otro elementoinline. Alternativamente, podría usar elmargin: 0 auto, asumiendo que el elemento es nivel deblock.
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
<section class="parent">
<div class="child">I''m vertically/horizontally centered!</div>
</section>
Enfoque 4: posicionamiento absoluto del
50%desde la parte superior con desplazamiento:Ejemplo aquí / Ejemplo de pantalla completa
Este enfoque supone que el texto tiene una altura conocida, en este caso,
18px. Simplemente posicione el elemento50%desde arriba, en relación con el elemento principal. Use un valor demargin-topnegativo que sea la mitad de la altura conocida del elemento, en este caso --9px.
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
<div class="container">
<p>I''m vertically/horizontally centered!</p>
</div>
Enfoque 5: el método de
line-height(menos flexible, no sugerido):En algunos casos, el elemento padre tendrá una altura fija. Para el centrado vertical, todo lo que tiene que hacer es establecer un valor de
line-heighten el elemento secundario igual a la altura fija del elemento principal.Aunque esta solución funcionará en algunos casos, vale la pena señalar que no funcionará cuando haya varias líneas de texto, como esta .
.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
<div class="parent">
<span class="child">I''m vertically/horizontally centered!</span>
</div>