strong - tag center html5

Posición por punto central, en lugar de punto superior izquierdo

Question

¿Es posible indicar el código a posicionar por el punto central de un elemento, en lugar de por el punto superior izquierdo? Si mi elemento padre tiene

width: 500px;

y mi elemento hijo tiene

/*some width, for this example let''s say it''s 200px*/
position: absolute;
left: 50%;

uno supondría que, en función del 50% posicionamiento, el elemento secundario estará en el centro del elemento principal, dejando 150px de espacio libre en cada lado. Sin embargo, no lo es, ya que es el punto superior izquierdo del niño que llega al 50% del ancho del padre, por lo tanto, el ancho total del niño de 200px va a la derecha desde allí, dejando 250px de espacio libre a la izquierda y Sólo 50px a la derecha.

Entonces, mi pregunta es, ¿cómo lograr el posicionamiento del centro ?

Encontré esta solución:

position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;

pero no me gusta porque necesita editarlo manualmente para el ancho de cada elemento, me gustaría algo que funcione globalmente.

(Por ejemplo, cuando trabajo en Adobe After Effects, puedo establecer una posición para un objeto y luego establecer un punto de anclaje específico de ese objeto que se colocará en esa posición. Si el lienzo tiene un ancho de 640px , coloca un objeto a 640px y elige el centro del objeto para que sea su punto de anclaje, entonces todo el objeto se centrará dentro del lienzo ancho de 1280px .)

Me imagino algo como esto en CSS:

position: absolute;
left: 50%;
horizontal-anchor: center;

De manera similar, horizontal-anchor: right posicionaría el elemento por su lado derecho, por lo que todo el contenido estaría a la izquierda desde el punto del ancho del 50% de su padre.

Y, lo mismo se aplicaría para vertical-anchor , lo consigues.

Entonces, ¿es posible algo así usando solo CSS (sin scripting)?

¡Gracias!

Answer 1

Aquí hay una forma de centrar un elemento de texto en el medio del contenedor (usando un encabezado como ejemplo)

CSS:

.header {
     text-align: center;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
}

Se centra por un punto de anclaje medio.

Answer 2

Me topé con esta pregunta y me gustaría agregar otra forma de centrar el contenido dentro de un div.

Al utilizar el ''cuadro flexible'' del modo de visualización CSS3, como en la configuración de las siguientes propiedades CSS en la división principal

display: flex;
position: relative;
align-items: center;
justify-content:center;

Y ''al menos'' configurando las siguientes propiedades para el div niño

position:relative;

El navegador centrará automáticamente el contenido dentro del div padre, no afectado por su ancho o alto, esto es particularmente útil cuando está desarrollando algo como una cuadrícula de imagen o simplemente quiere eliminar la molestia de calcular una posición de divs, y luego tiene que vuelva a calcularlo cuando cambie de opinión acerca de la configuración de dicho div.

En mi propio trabajo, tiendo a configurar una clase llamada

.center-center

Con las propiedades que describí para la división principal, solo agréguelas a cualquier elemento en el que necesite centrar su contenido.

He creado un JSFiddle para apoyar esta explicación, siéntase libre de hacer clic en los cuadrados rojos para ver el posicionamiento en acción.

https://jsfiddle.net/f1Lfqrfs/

Para soporte multilínea, puede agregar (o descomentar en el JSF) la siguiente propiedad CSS al DIV principal

flex-wrap: wrap;

Answer 3

Si agregar otro elemento es una opción, considere lo siguiente:

( Ver el siguiente código en vivo aquí )

HTML:

<div class="anchor" id="el1">
    <div class="object">
    </div>
</div>
<div class="anchor" id="el2">
    <div class="object">
    </div>
</div>

CSS:

/* CSS for all objects */

div.object
{
    width:               100%;
    height:              100%;
    position:            absolute;
    left:                -50%;
    top:                 -50%; /* to anchor at the top center point (as opposed to true center) set this to 0 or remove it all together */
}

div.anchor
{
    position:            absolute; /* (or relative, never static) */
}


/* CSS for specific objects */

div#el1
{
    /* any positioning and dimensioning properties for element 1 should go here */
    left:                100px;
    top:                 300px;
    width:               200px;
    height:              200px;
}

div#el2
{
    /* any positioning and dimensioning properties for element 2 should go here */
    left:                400px;
    top:                 500px;
    width:               100px;
    height:              100px;
}

div#el1 > div.object
{
    /* all other properties for element 1 should go here */
    background-color:    purple;
}

div#el2 > div.object
{
    /* all other properties for element 2 should go here */
    background-color:    orange;
}

Básicamente, lo que estamos haciendo es configurar un objeto para definir la posición, el ancho y la altura del elemento, y luego colocar otro dentro del mismo que se desplace en un 50%, y obtenga sus dimensiones primarias (es decir, width: 100% ) .

Answer 4

Si el elemento debe estar absolutamente posicionado (por lo tanto, margin: 0 auto; no sirve para centrar), y las secuencias de comandos están fuera de discusión, podría lograrlo con las transformaciones de CSS3.

.centered-block {
    width: 100px; 
    left: 50%; 
    -webkit-transform: translate(-50%, 0); 
    position: absolute;
}

Vea este fiddle para algunos ejemplos. Las partes importantes: left: 50%; empuja el bloque a mitad de camino a través de su padre (por lo que su lado izquierdo está en la marca del 50%, como usted mencionó). transform: translate(-50%, 0); tira del bloque la mitad de su propio ancho hacia atrás a lo largo del eje x (es decir, hacia la izquierda), que lo colocará justo en el centro del elemento principal.

Tenga en cuenta que es poco probable que esto sea compatible con varios navegadores, y aún requerirá un retroceso de algún tipo para los navegadores antiguos.

Answer 5

izquierda: el 50% no centra el centro de gravedad de este div 50% a la izquierda, es la distancia entre el borde izquierdo y el borde izquierdo del elemento principal, por lo que básicamente necesita hacer algunos cálculos.

left = Width(parent div) - [ Width(child div) + Width(left border) + Width(right border) ]

left = left / 2

Así que puedes hacer una función de Javascript ...

function Position(var parentWidth, var childWith, var borderWidth)
{
      //Example parentWidth = 400, childWidth = 200, borderWidth = 1
      var left = (parentWidth - ( childWidth + borderWidth));
      left = left/2;
      document.getElementById("myDiv").style.left= left+"px";
}