Cómo centrar una Div Absoluto

Centrar un elemento utilizando posicionamiento absoluto puede hacer que una página web sea más profesional y eficiente. El elemento aparecerá siempre en el centro de la página y no puede ser cambiado por diversos navegadores web. La técnica viene con algunas peculiaridades. Conseguir el código exactamente y visualizar lo que desea que aparezca en la página debe hacer el proceso exitoso y racionalizado.

Instrucciones

Visualizar su sitio y escribir en un papel

1

Dibuje su sitio en el papel, en lugar de mantenerlo todo en su cabeza, antes de comenzar el código. Se ayuda a visualizar los pasos. El código tendrá más sentido si se puede pensar que a través de papel.

2 Abra la hoja de estilos y escriba lo siguiente para el elemento que desea colocar en el medio:

Nombre del elemento para centrar {

position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;

}

Ajuste del lado izquierdo a "50%" hará que el elemento se inicia en el punto muerto de la página, ya que es a partir de la mitad del camino (o el 50 por ciento respecto al eje horizontal de la izquierda).

3 Guarde la nueva hoja de estilos y subirlo a su sitio web a través del cPanel (panel de control). Una vista previa de la página y ver si el elemento está colocado correctamente.

Posicionamiento y centrado de múltiples elementos

4 Asignar un índice z a sus elementos para clasificar el que aparece por encima de los demás, si usted está planeando para apilar más de un elemento o si tiene un bloque de texto que desea que aparezca en la parte superior del elemento posicionado.

5 Ajuste el elemento a -1 si desea que aparezca debajo de un bloque de texto:

Nombre del elemento para centrar {

position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
z-index: -1;

}

6

Apilar múltiples elementos en el centro, proporcionando la derecha z-índice para cada uno. Por ejemplo, si tiene tres imágenes que desea apilar una encima de la otra de menor a mayor, haga lo siguiente:

elemento central pequeña {

position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
z-index: 1;

}

elemento de centro medio {

position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
z-index:2;

}

elemento central grande {

position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
z-index: 3;

}