javascript - poner - Posicionando el elemento<div> en el centro de la pantalla
div flotante centrado (12)
Quiero colocar un elemento <div> (o una <table> ) en el centro de la pantalla, independientemente del tamaño de la pantalla. En otras palabras, el espacio que queda en ''arriba'' e ''abajo'' debe ser igual y el espacio restante en ''lado derecho'' y ''lado izquierdo'' debe ser igual. Me gustaría lograr esto solo con CSS.
He intentado lo siguiente pero no está funcionando:
<body>
<div style="top:0px; border:1px solid red;">
<table border="1" align="center">
<tr height="100%">
<td height="100%" width="100%" valign="middle" align="center">
We are launching soon!
</td>
</tr>
</table>
</div>
</body>
Nota:
Está bien si el elemento <div> (o <table> ) se desplaza con el sitio web o no. Solo quiero que esté centrado cuando se carga la página.
Ahora, es más fácil con HTML 5 y CSS 3:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div>
<div>TODO write content</div>
</div>
</body>
</html>
Con las transformaciones siendo más ubicuamente compatibles en estos días, puede hacer esto sin saber el ancho / alto de la ventana emergente
.popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
¡Fácil! JSFiddle aquí: http://jsfiddle.net/LgSZV/
Actualización: consulte https://css-tricks.com/centering-css-complete-guide/ para obtener una guía bastante exhaustiva sobre el centrado de CSS. Agregándolo a esta respuesta ya que parece obtener muchos ojos.
Establece el ancho y la altura y estás bien.
div {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
}
Si desea que las dimensiones del elemento sean flexibles (y no se preocupen por los navegadores heredados), vaya con la respuesta de XwipeoutX .
Funcionará para cualquier objeto. Incluso si no sabes el tamaño:
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Haría esto en CSS:
div.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
luego en HTML:
<div class="centered"></div>
La manera fácil, si tienes un ancho y altura fijos:
#divElement{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
Por favor, no use estilos en línea! Aquí hay un ejemplo de trabajo http://jsfiddle.net/S5bKq/ .
Otro enfoque fácil y flexible para mostrar el bloque en el centro: usar alineación de texto nativo con line-height alineación line-height text-align .
Solución:
.parent {
line-height: 100vh;
text-align: center;
}
.child {
display: inline-block;
vertical-align: middle;
line-height: 100%;
}
Y muestra html:
<div class="parent">
<div class="child">My center block</div>
</div>
Hacemos div.parent pantalla completa, y su hijo único div.child alinea como texto con display: inline-block .
Ventajas:
- Flexibilidad, sin valores absolutos
- tamaño de soporte
- funciona bien en el móvil
Ejemplo simple en JSFiddle: https://jsfiddle.net/k9u6ma8g
Si hay alguien buscando una solución,
Encontré esto,
¡Es la mejor solución que encontré hasta ahora!
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
http://dabblet.com/gist/2872671
¡Espero que lo disfrutes!
Si tiene un div fijo solo la posición absoluta es al 50% desde la parte superior y al 50% a la izquierda y al margen negativo a la parte superior e izquierda de la mitad de la altura y el ancho respectivamente. Ajústese a sus necesidades:
div {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 300px;
margin-left: -250px;
margin-top: -150px;
}
Usa flex . Mucho más simple y funcionará independientemente de su tamaño div :
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
<html>
<head>
</head>
<body>
<div class="center-screen">
I''m in the center
</div>
</body>
</html>
prueba esto
<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
<tr>
<td>
<div style="text-align: left; display: inline-block;">
Your Html code Here
</div>
</td>
</tr>
</table>
O esto
<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
<div style="display: table-row">
<div style="display: table-cell; vertical-align:middle;">
<div style="text-align: left; display: inline-block;">
Your Html code here
</div>
</div>
</div>
</div>
prueba esto:
width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;