html - texto - ¿La mejor manera de centrar un<div> en una página vertical y horizontalmente?
centrar texto en div bootstrap (30)
2018 forma utilizando CSS Grid:
.parent{
display: grid;
place-items: center center;
}
Comprueba la compatibilidad con el navegador, Caniuse sugiere que funciona desde Chrome 57, FF 52, Opera 44, Safari 10.1, Edge 16. No lo comprobé.
Vea el fragmento a continuación:
.parent{
display: grid;
place-items: center center;
/*place-items is a shorthand for align-items and justify-items*/
height: 200px;
border: 1px solid black;
background: gainsboro;
}
.child{
background: white;
}
<div class="parent">
<div class="child">Centered!</div>
</div>
¿La mejor forma de centrar un elemento <div> en una página tanto vertical como horizontalmente?
Sé que margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; se centrará en la horizontal, pero ¿cuál es la mejor manera de hacerlo verticalmente también?
La mejor y más flexible manera.
El truco principal en esta demostración es que, en el flujo normal de elementos que van de arriba a abajo, el margin-top: auto se establece en cero. Sin embargo, un elemento posicionado absolutamente actúa de la misma manera para la distribución del espacio libre y, de manera similar, puede centrarse verticalmente en la top e bottom especificadas (no funciona en IE7).
Este truco funcionará con cualquier tamaño de div .
HTML:
<div></div>
CSS:
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Aquí hay un script que escribí hace un tiempo atrás ( está escrito usando la biblioteca jQuery ):
var centerIt = function (el /* (jQuery element) Element to center */) {
if (!el) {
return;
}
var moveIt = function () {
var winWidth = $(window).width();
var winHeight = $(window).height();
el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
};
$(window).resize(moveIt);
moveIt();
};
Aunque esto no funcionó cuando el OP hizo esta pregunta, creo que, al menos para los navegadores modernos, la mejor solución es usar display: flex o pseudo clases .
Puedes ver un ejemplo en el siguiente fiddle . Aquí está el violín actualizado .
Para las pseudo clases un ejemplo podría ser:
.centerPseudo {
display:inline-block;
text-align:center;
}
.centerPseudo::before{
content:'''';
display:inline-block;
height:100%;
vertical-align:middle;
width:0px;
}
El uso de display: flex , según css-tricks y MDN es el siguiente:
.centerFlex {
align-items: center;
display: flex;
justify-content: center;
}
Hay otros atributos disponibles para flexión, que se explican en los enlaces mencionados anteriormente, con más ejemplos.
Si tiene que admitir navegadores más antiguos, que no son compatibles con css3, entonces probablemente debería usar javascript o la solución de ancho / alto fijo que se muestra en las otras respuestas.
Aunque llego demasiado tarde, pero esto es muy fácil y simple. El centro de la página siempre se deja 50%, y 50% superior. Entonces, menos el ancho y la altura del div 50% y establecer margen izquierdo y margen derecho. Espero que funcione para todas partes.
body{
background: #EEE;
}
.center-div{
position: absolute;
width: 200px;
height: 60px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -30px;
background: #CCC;
color: #000;
text-align: center;
}
<div class="center-div">
<h3>This is center div</h3>
</div>
Creo que hay dos formas de alinear un centro div a través de CSS.
.middleDiv {
position : absolute;
width : 200px;
height : 200px;
left : 50%;
top : 50%;
margin-left : -100px; /* half of the width */
margin-top : -100px; /* half of the height */
}
Esta es la manera simple y mejor Para ver la demo visite el siguiente enlace:
http://w3webpro.blogspot.in/2013/07/how-to-make-div-horizontally-and.html
En el caso de que usted sepa un tamaño definido para su div , puede usar calc .
Ejemplo en vivo: https://jsfiddle.net/o8416eq3/
Notas: Esto funciona solo si ha codificado el ancho y el alto de su `` div` en el CSS.
#target {
position:fixed;
top: calc(50vh - 100px/2);
left: calc(50vw - 200px/2);
width:200px;
height:100px;
background-color:red;
}
<div id=''target''></div>
En realidad, hay una solución, usando css3, que puede centrar verticalmente una división de altura desconocida. El truco es mover el div hacia abajo en un 50%, luego usar transformY para volver al medio. El único prerrequisito es que el elemento para centrarse tiene un padre. Ejemplo:
<div class="parent">
<div class="center-me">
Text, images, whatever suits you.
</div>
</div>
.parent {
/* height can be whatever you want, also auto if you want a child
div to be responsible for the sizing */
height: 200px;
}
.center-me {
position: relative;
top: 50%;
transform: translateY(-50%);
/* prefixes needed for cross-browser support */
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Compatible con todos los navegadores principales, e IE 9 y superior (no se preocupe por IE 8, ya que murió junto con Windows XP este otoño. Gracias a Dios).
Es el navegador lo soporta, usar traducir es potente.
position: absolute;
background-color: red;
width: 70%;
height: 30%;
/* The translate % is relative to the size of the div and not the container*/
/* 21.42% = ( (100%-70%/2) / 0.7 ) */
/* 116.666% = ( (100%-30%/2) / 0.3 ) */
transform: translate3d( 21.42%, 116.666%, 0);
Esta solucion funciono para mi
.middleDiv{
position : absolute;
height : 90%;
bottom: 5%;
}
(o altura: 70% / parte inferior: 15%
altura: 40% / abajo: 30% ...)
Estaba mirando el archivo de vista de Laravel y noté que centraban el texto perfectamente en el medio. Recordé sobre esta pregunta de inmediato. Así es como lo hicieron:
<html>
<head>
<title>Laravel</title>
<!--<link href=''//fonts.googleapis.com/css?family=Lato:100'' rel=''stylesheet'' type=''text/css''>-->
<style>
.container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
}
.inside {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="inside">This text is centered</div>
</div>
</body>
El resultado se ve tan
Este es el mejor código para centrar el bot div horizontalmente y verticalmente
div
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
La simplicidad de esta técnica es impresionante:
(Sin embargo, este método tiene sus implicaciones, pero si solo necesita centrar el elemento independientemente del flujo del resto del contenido, está bien. Use con cuidado)
Margen:
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan tellus purus, et mollis nulla consectetur ac. Quisque id elit at diam convallis venenatis eget sed justo. Nunc egestas enim mauris, sit amet tempor risus ultricies in. Sed dignissim magna erat, vel laoreet tortor bibendum vitae. Ut porttitor tincidunt est imperdiet vestibulum. Vivamus id nibh tellus. Integer massa orci, gravida non imperdiet sed, consectetur ac quam. Nunc dignissim felis id tortor tincidunt, a eleifend nulla molestie. Phasellus eleifend leo purus, vel facilisis massa dignissim vitae. Pellentesque libero sapien, tincidunt ut lorem non, porta accumsan risus. Morbi tempus pharetra ex, vel luctus turpis tempus eu. Integer vitae sagittis massa, id gravida erat. Maecenas sed purus et magna tincidunt faucibus nec eget erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mollis sem.</div>
Y CSS:
div {
background:red;
position:absolute;
color:#fff;
top:50%;
left:50%;
padding:15px;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
Esto centrará el elemento horizontalmente y verticalmente también. Sin márgenes negativos, solo poder de transformaciones. También deberíamos ya olvidarnos de IE8 ¿no deberíamos?
Lo siento por la respuesta tardía, la mejor manera es
div {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
margin-top y margin-left deben estar de acuerdo con el tamaño de la caja div.
Me sorprende que esto no se haya mencionado todavía, pero la forma más sencilla de hacerlo sería establecer la altura, el margen (y el ancho, si lo desea) utilizando los tamaños de las ventanas.
Como sabrán, la altura total de la ventana gráfica = 100vh.
Si desea que la height de su contenedor ocupe el 60% (60vh) de la pantalla, puede dividir el resto (40vh) de manera equitativa entre los márgenes superior e inferior para que el elemento se alinee automáticamente en el centro.
Al establecer el margin-left y margin-right a auto , se asegurará de que el contenedor esté centrado horizontalmente.
.container {
width: 60vw; /*optional*/
height: 60vh;
margin: 20vh auto;
background: #333;
}
<div class="container">
</div>
Mi forma preferida de centrar una caja tanto vertical como horizontalmente, es la siguiente técnica:
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 reajustar la alineación horizontal del texto a, por ejemplo.
text-align: left;otext-align: right;, a menos que quieras que el texto esté centrado
¡La elegancia de esta técnica es que puede agregar su contenido al cuadro de contenido sin preocuparse por su altura o ancho!
Manifestación
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
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">
You can put anything here!
</div>
</div>
</div>
Véase también este violín !
EDITAR
Sí, sé que puede lograr más o menos la misma flexibilidad con la transform: translate(-50%, -50%); o transform: translate3d(-50%,-50%, 0); , la técnica que propongo tiene mucho mejor soporte para el navegador. Incluso con los prefijos de los navegadores como -webkit , -ms o -ms , transform no ofrece exactamente el mismo soporte de navegador.
Por lo tanto, si le interesan los navegadores antiguos (por ejemplo, IE9 y versiones anteriores), no debe usar la transform para el posicionamiento.
Sé que llego tarde a la fiesta, pero aquí hay una manera de centrar un div con dimensión desconocida dentro de un padre de dimensión desconocida.
estilo:
<style>
.table {
display: table;
height: 100%;
margin: 0 auto;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.centered {
background-color: red;
}
</style>
HTML:
<div class="table">
<div class="table-cell"><div class="centered">centered</div></div>
</div>
MANIFESTACIÓN:
Echa un vistazo a esta demo .
Si está viendo los nuevos navegadores (IE10 +),
entonces puede hacer uso de la propiedad de transformación para alinear un div en el centro.
<div class="center-block">this is any div</div>
Y css para esto debe ser:
.center-block {
top:50%;
left: 50%;
transform: translate3d(-50%,-50%, 0);
position: absolute;
}
El problema aquí es que ni siquiera tiene que especificar la altura y el ancho de la división, ya que se ocupa por sí solo.
Además, si desea colocar un div en el centro de otro div, simplemente puede especificar la posición del div exterior como relativo y luego este CSS comienza a trabajar para su div.
Cómo funciona:
Cuando especifica la izquierda y la parte superior al 50%, el div se desplaza en el cuarto inferior derecho de la página con su extremo superior izquierdo fijado en el centro de la página. Esto se debe a que las propiedades izquierda / superior (cuando se dan en%) se calculan en función de la altura del div exterior (en su caso, ventana).
Pero la transformación utiliza la altura / anchura del elemento para determinar la traducción, por lo que la div se moverá hacia la izquierda (50% de anchura) y la parte superior (50% de su altura), ya que se dan en negativos, por lo que se alinean al centro de la página.
Si tiene que admitir navegadores más antiguos (y lo siento, incluido IE9 también), la celda de la tabla es el método más popular para usar.
Si ustedes están usando JQuery, pueden hacerlo usando .position() ;
<div class="positionthis"></div>
CSS
.positionthis {
width:100px;
height:100px;
position: absolute;
background:blue;
}
Javascript (JQuery)
$(document).ready(function () {
$(''.positionthis'').position({
of: $(document),
my: ''center center'',
at: ''center center'',
collision: ''flip flip''
});
});
JSFiddle: http://jsfiddle.net/vx9gV/
Solución simple aprovechando Flex Display
<div style = ''display:flex; position:absolute; top:0; bottom:0; right:0; left:0; ''>
<div id = ''div_you_want_centered'' style = ''margin:auto;''>
This will be Centered
</div>
</div>
Echa un vistazo a http://css-tricks.com/snippets/css/a-guide-to-flexbox/
El primer div ocupa toda la pantalla y tiene una pantalla: flex set para cada navegador. El segundo div (centrado div) aprovecha la pantalla: flex div donde margin: auto funciona de forma brillante.
Tenga en cuenta la compatibilidad IE11 +. (IE10 con prefijo).
Un método más (a prueba de balas) tomado desde here utilizando la regla ''mostrar: tabla'':
Margen
<div class="container">
<div class="outer">
<div class="inner">
<div class="centered">
...
</div>
</div>
</div>
</div>
CSS:
.outer {
display: table;
width: 100%;
height: 100%;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered {
position: relative;
display: inline-block;
width: 50%;
padding: 1em;
background: orange;
color: white;
}
Una respuesta alternativa sería this .
<div id="container">
<div id="centered"> </div>
</div>
y el css:
#container {
height: 400px;
width: 400px;
background-color: lightblue;
text-align: center;
}
#container:before {
height: 100%;
content: '''';
display: inline-block;
vertical-align: middle;
}
#centered {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
}
Usando display:grid en padre y configurando el margin:auto to the centralerd elemnt hará el truco:
Vea el siguiente fragmento de código:
html,body {
width :100%;
height:100%;
margin:0;
padding:0;
}
.container {
display:grid;
height:90%;
background-color:blue;
}
.content {
margin:auto;
color:white;
}
<div class="container">
<div class="content"> cented div here</div>
</div>
Usando Flex-box en mi opinión:
#parent {
display: flex;
justify-content: center;
align-items: center;
}
<div id="parent">
<div id="child">Hello World!</div>
</div>
Usted ve que solo hay tres propiedades CSS que tiene que usar para centrar el elemento secundario vertical y horizontalmente. display: center; Haga la parte principal simplemente activando la pantalla de Flex-box, justify-content: center; Centra el elemento hijo verticalmente y align-items: center; Centrarlo horizontalmente. Para ver el mejor resultado solo agrego algunos estilos extra:
#parent {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
width: 500px;
background: yellow;
}
#child {
width: 100px;
height: 100px;
background: silver;
}
<div id="parent">
<div id="child">Hello World!</div>
</div>
Si desea obtener más información sobre Flex-box, puede visitar W3Schools , MDN o css-tricks para obtener más información.
Utilice las siguientes propiedades de CSS para el elemento de alineación central horizontal y verticalmente. Esto funciona bien para mí.
div {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0px;
margin: auto;
width: 100px;
height: 100px;
}
Yo usaría translate :
Primero, coloque la esquina superior izquierda del div en el centro de la página (usando la position: fixed; top: 50%; left: 50% ). Luego, translate mueve hacia arriba en un 50% de la altura del div para centrarlo verticalmente en la página. Finalmente, traducir también mueve el div hacia la derecha en un 50% de su ancho para centrarlo horizontalmente.
De hecho, creo que este método es mejor que muchos otros, ya que no requiere ningún cambio en el elemento principal.
translate es mejor que translate3d en algunos escenarios debido a que está soportado por un mayor número de navegadores. http://caniuse.com/#search=translate
Para resumir, este método es compatible con todas las versiones de Chrome, Firefox 3.5+, Opera 11.5+, todas las versiones de Safari, IE 9+ y Edge.
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
font-size: 20px;
background-color: cyan;
border: darkgreen 5px solid;
padding: 5px;
z-index: 100;
}
table {
position: absolute;
top: 0;
left: 0;
}
td {
position: relative;
top: 0;
left: 0;
}
<table>
<tr>
<td>
<div class="centered">This div<br />is centered</div>
<p>
Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
</p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
</p>
</td>
</tr>
</table>
Sin embargo, tenga en cuenta que este método hace que este div permanezca en un lugar mientras se desplaza la página. Esto puede ser lo que quieres pero si no, hay otro método.
Ahora, si intentamos el mismo CSS, pero con la posición establecida en absoluta, estará en el centro del último padre que tiene una posición absoluta.
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
font-size: 20px;
background-color: cyan;
border: darkgreen 5px solid;
padding: 5px;
z-index: 100;
}
table {
position: absolute;
top: 0;
left: 0;
}
td {
position: relative;
top: 0;
left: 0;
}
<table>
<tr>
<td>
<div class="centered">This div<br />is centered</div>
<p>
Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
</p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
</p>
</td>
</tr>
</table>
Solución
Usando solo dos líneas de CSS, utilizando el poder mágico de Flexbox
.parent { display: flex; }
.child { margin: auto }
div {
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 */
}
<body>
<div>Div to be aligned vertically</div>
</body>
posición: div absoluta en el documento del cuerpo
Un elemento con posición: absoluto; está posicionado en relación con el antepasado posicionado más cercano (en lugar de posicionado en relación con la ventana gráfica (etiqueta del cuerpo), como fijo).
Sin embargo; Si un elemento posicionado absoluto no tiene ancestros posicionados, utiliza el cuerpo del documento y se mueve junto con el desplazamiento de la página.
fuente: posición CSS
div {
border-style: solid;
position: fixed;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
}
Ajuste a la izquierda y arriba con respecto al ancho y la altura, es decir (100% - 80%) / 2 = 10%
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Explicación:
Dale una posición absoluta (el padre debe tener una posición relativa). Luego, la esquina superior izquierda se mueve hacia el centro. Debido a que aún no conoce el ancho / alto, utiliza la transformación css para traducir la posición en relación al medio. traducir (-50%, -50%) reduce la posición x e y de la esquina superior izquierda en un 50% de ancho y alto.