Cómo alinear un con el medio (horizontal / ancho) de la página

Tengo una etiqueta div con width establecido en 800px . Cuando el ancho del navegador es superior a 800 px , no debe estirar el div pero debe llevarlo al centro de la página.

  
centered content

position: absolute y luego top:50% e left:50% coloca el borde superior en el centro verticalmente de la pantalla y el borde izquierdo en el centro horizontal, luego agregando margin-top a negativo de la altura del div, es decir, -100 lo desplaza arriba por 100, de manera similar para el margin-left . Esto obtiene div exactamente en el centro de la página.

 #outPopUp { position: absolute; width: 300px; height: 200px; z-index: 15; top: 50%; left: 50%; margin: -100px 0 0 -150px; background: red; } 
 
  1. ¿Quiere decir que quiere centrarlo vertical u horizontalmente? Dijiste que especificaste la height a 800px, y querías que el div no se estire cuando el width era mayor que eso …

  2. Para centrar horizontalmente, puede usar el margin: auto; atributo en css. Además, deberá asegurarse de que los elementos body y html no tengan ningún margen o relleno:

 html, body { margin: 0; padding: 0; } #centeredDiv { margin-right: auto; margin-left: auto; width: 800px; } 

La solución Modern Flexbox es el camino a seguir en / desde 2015. justify-content: center se usa para que el elemento padre alinee el contenido al centro del mismo.

HTML

 
Center

CSS

 .container { display: flex; justify-content: center; } .center { width: 800px; } 

Salida

 .container { display: flex; justify-content: center; } .center { width: 800px; background: #5F85DB; color: #fff; font-weight: bold; font-family: Tahoma; } 
 
Centered div with left aligned text.

Para que también funcione correctamente en Internet Explorer 6, debe hacerlo de la siguiente manera:

HTML

  
centered content

CSS

 body { margin: 0; padding: 0; text-align: center; /* !!! */ } .centered { margin: 0 auto; text-align: left; width: 800px; } 
 
 div { display: table; margin-right: auto; margin-left: auto; } 

También puedes usarlo así:

 
Your contents here...

Simplemente use la etiqueta central justo después de la etiqueta corporal y la etiqueta central final justo antes de que el cuerpo termine

  
........your code here.....

Esto funcionó para mí con todos los navegadores que he probado

Agregue esta clase al div que desea centrado (que debe tener un ancho establecido):

 .marginAutoLR { margin-right:auto; margin-left:auto; } 

O bien, agregue los elementos de margen a su clase div, así:

 .divClass { width:300px; margin-right:auto; margin-left:auto; } 

Utilice la propiedad css flex : http://jsfiddle.net/cytr/j7SEa/6/show/

 body { /* centerized */ display: box; flex-align: center; flex-pack: center; } 

Esto se puede lograr fácilmente mediante un contenedor flexible.

 .container{ width: 100%; display: flex; height: 100vh; justify-content: center; } .item{ align-self: center; } 

Enlace de vista previa

Algunas otras configuraciones preexistentes de un código anterior que evitarán que la página div se centre en L & R son: 1) otras clases ocultas en enlaces externos de hojas de estilo. 2) otras clases incrustadas en algo así como un img (como para controles de formato de impresión CSS externos más antiguos). 3) el código de leyenda con ID y / o CLASSES entrará en conflicto con una clase div nombrada.

Centrado sin especificar ancho de div:

 body { text-align: center; } body * { text-align: initial; } body div { display: inline-block; } 

Esto es algo así como la etiqueta

, excepto:

  • todos los elementos de niños en línea directos (por ej.,

    ) de

    también se posicionarán al centro
  • El elemento de bloque en línea puede tener diferentes tamaños (para display:block configuración de display:block ) de acuerdo con los valores predeterminados del navegador
 body, html{ display:table; height:100%; width:100%; } .container{ display:table-cell; vertical-align:middle; } .container .box{ width:100px; height:100px; background:red; margin:0 auto; } 

http://jsfiddle.net/NPV2E/

“ancho: 100%” para la etiqueta “cuerpo” es solo por ejemplo. En un proyecto real, puede eliminar esta propiedad.

Si tiene un contenido regular y no solo una línea de texto, entonces solo la posible razón que conozco es calcular el margen.
Aquí hay un ejemplo:

HTML

 
first
second
third

CSS

 body { margin: 0; padding: 0; } .common { border: 1px solid black; } #supercontainer { width: 1200px; background: aqua; float: left; } #middlecontainer { float: left; width: 104px; margin: 0 549px; } #container { float: left; } #first { background: red; height: 102px; width: 50px; float: left; } #second { background: green; height: 50px; width: 50px; } #third { background: yellow; height: 50px; width: 50px; } 

Entonces, #supercontainer es tu "whole page" y su width es de 1200px .
#middlecontainer es div con contenido de su sitio; es width 102px . En caso de que se conozca el width del contenido, debe dividir el tamaño de la página en 2 y substruir desde la mitad del contenido del width del contenido:
1200/2 – (102/2) = 549;

Sí, también veo que esto es DER GROSSE de CSS.

Utilice justify-content y align-items para alinear horizontalmente y verticalmente un div

https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items

 html, body, .container { height: 100%; width: 100%; } .container { display: flex; align-items: center; justify-content: center; } .mydiv { width: 80px; } 
 
h & v aligned

Esto también funciona en IE, los márgenes automáticos no.

 .centered { position: absolute; display: inline-block; left: -500px; width: 1000px; margin: 0 50%; } 

Div centrada vertical y horizontalmente dentro del elemento principal sin corregir el tamaño del contenido

Mira este ejemplo (clic) . Muy simple, y funciona para alturas flexibles también. Perfecto si no tienes contenido con altura fija.

Y aquí (clic) es una buena descripción general con algunas otras soluciones.

Y aquí (clic) otro ejemplo con una solución de ancho flexible con el famoso truco -50%

Simple http://jsfiddle.net/8pd4qx5r/

 html { display: table; height: 100%; width: 100%; } body { display: table-cell; vertical-align: middle; } .content { margin: 0 auto; width: 260px; text-align: center; background: pink; } 

Use el siguiente código para centrar la caja div:

 .box-content{ margin: auto; top: 0; right: 0; bottom: 0; left: 0; position: absolute; width: 800px; height: 100px; background-color: green; } 
 
 .middle { margin: auto; text-align: center; } 

Si el contenido de su centro está dentro de otros divs, solo el margen puede salvarlo. Nada más. Lo afronto siempre cuando no uso framework como Bootstrap.

  
In center

Si desea cambiar la posición vertical, cambie el valor de 250 y puede organizar el contenido según su necesidad. No es necesario indicar el ancho y otros parámetros.

En mi caso, el tamaño de la pantalla del teléfono es desconocido, esto es lo que hice.

HTML

 

CSS

 .loadingImg{ position: fixed; top: 0px; left: 0px; z-index: 9999999; border:0; background: url('../images/loading.gif') no-repeat center; background-size: 50px 50px; display: block; margin: 0 auto; -webkit-border-radius: 50px; border-radius: 50px; } 

JS (antes de que necesites mostrar esta DIV)

 $(".loadingImg").css("height",$(document).height()); $(".loadingImg").css("width",$(document).width()); $(".loadingImg").show(); 

Una pregunta muy antigua con muchas respuestas, pero por alguna razón ninguna de ellas funcionó realmente para mí. Esto es lo que funcionó para mí y funciona también en el navegador:

 .center { text-align: center; height: 100%; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; } 

obtener el ancho de la pantalla que hacer margen restante 25% hacer margen derecho 25% de esta manera el contenido de su contenedor se sentará en el medio. ejemplo: supongamos que el ancho del contenedor = 800px; <

 div class='container' width='device-width' id='updatedContent'> 

if($("#myContent").parent===$("updatedContent")) { $("#myContent").css({ 'left':'-(device-width/0.25)px'; 'right':'-(device-width/0.225)px'; }); }
     

parent {position: relative} child {position: absolute, left: 50%, transform: translateX (-50%)}