Centro de posición absoluta CSS
Ejemplo # 1: Centro de posición absoluta horizontalmente
Haremos todos estos ejemplos en Visual Studio Code. Tenemos que crear el archivo HTML en nuestro código de Visual Studio y comenzar a escribir el código en él. Después de completar el código que se da en la imagen, debe guardar este archivo con el ".Extensión del archivo HTML ", ya que es un archivo" HTML ".
Mencione el tipo de documento "HTML", ya que sabemos que es un código HTML. Luego, abra "" y "". El meta se define a continuación, que es "charset = utf-8", que permite acceder a diferentes caracteres. También vinculamos este archivo actual con el archivo CSS en el que hacemos algo de estilo y usamos la propiedad de posición absoluta. Para describir la asociación, "Rel" está aquí; El tipo es "texto/CSS" y el "href" en el que pasamos el nombre del archivo. Vinculamos el "estilo central.CSS ”con este archivo actual. Ahora, después de cerrar el "" vamos a usar el "". Tenemos un rumbo en el cuerpo y una clase "div" con el nombre "elemento". Por fin, tenemos que cerrar todas las etiquetas en secuencia. Primero, cierre "div", "cuerpo" y luego las etiquetas "html".
Código CSS
Aquí está el archivo CSS. Cuando crea este archivo, usa el ".Extensión del archivo de CSS ", ya que es nuestro archivo CSS. Debe recordar que guardó este archivo con el mismo nombre que ha mencionado en su archivo HTML. Ahora aquí, vamos a diseñar esta clase de elemento usando diferentes propiedades. Lugar "."Y escriba" elemento ", ya que es el nombre de la clase" div ". Ajustamos la "altura" y "ancho" como "100px" y "200px" respectivamente. Coloque "naranja" como color de fondo. Y blanco para el color de la fuente. Ahora, vamos a usar la propiedad de "posición absoluta". Establecer "posición" como "absoluto". Desde la "izquierda" es "0" y desde la "derecha" se establece como "0". Aquí, los márgenes superior e inferior son "0" y la izquierda; Los márgenes correctos son "Auto". Este margen automático izquierdo y derecho se usa, por lo que se necesita el margen automático para dar el ancho del objeto.
La salida se muestra en el navegador. Presione "Alt+ B ”en el archivo HTML para mostrar la salida. También pegamos la salida del código HTML y CSS anterior a continuación.
Producción
Ejemplo # 2: Centro de posición absoluta verticalmente
En este ejemplo, estamos utilizando el mismo archivo HTML que hemos creado en el ejemplo anterior. Simplemente cambie el encabezado de "Centro de posición absoluta horizontalmente" a "Centro de posición absoluta verticalmente".
Aquí, establecemos el color del fondo en "púrpura". Cuando tenemos que establecer la posición absoluta centrada verticalmente, entonces ponemos la posición a "Absoluto" y aquí mencionamos "Top: 0" y "Bottom: 0". También establecemos el margen para este "Auto" para "Top" y "Bottom". El valor "0" está configurado para "izquierda" y "derecha". También puede verificar la salida de este ejemplo, que hemos pegado a continuación.
Producción
En esta salida, el cuadro se coloca verticalmente en el centro utilizando la propiedad de posición absoluta. En esta imagen, el espacio entre el texto y el cuadro muestra que se coloca en el centro en la posición vertical.
Ejemplo # 3: Centro de posición absoluta tanto horizontal como verticalmente
En nuestro tercer ejemplo, vamos a establecer el objeto en la posición central absoluta. Aquí, el objeto está centrado en la vertical y también desde la posición horizontal. Probemos este tercer ejemplo.
Aquí, desde el principio, el código es el mismo que hemos discutido en nuestro ejemplo anterior. Acabamos de cambiar el código de la etiqueta "" un poco. Creamos una clase de "div" usando "contenedor" como el nombre de la clase. Antes de cerrar esta etiqueta "div", creamos otra "clase div" y esta vez, el nombre es "datos". Crear un encabezado usando el "
"Etiqueta y también escriba un párrafo dentro de las etiquetas" ". Luego use las etiquetas de cierre para ambas etiquetas "".
Código CSS
En el código CSS, primero, abra los soportes para el párrafo que está escrito dentro de la clase de contenedores. La "altura" de este contenedor es "60px" y el "ancho" también es "60px". Aplicamos el relleno aquí como "10px", por lo que generará un espacio "10px" entre el contenido y el borde. Aquí la posición del texto es "relativa". Queremos dibujar el borde alrededor del contenedor o caja, por lo que estamos utilizando la propiedad "fronteras" para esta. Establecimos el ancho del "borde" como "3px", el tipo de borde es "sólido" y el color de este borde es "verde". Entonces, cuando mostramos esto en el navegador, el borde será de color verde, sólido y también de ancho de "3px". Usamos "rosa" como color de fondo. Y seleccione "Negro" para la fuente. Entonces, la fuente o el texto se mostrarán en color "negro". Ahora, aquí usamos la propiedad "Centro de posición absoluta", y establecerá el objeto y se dirigirá al centro de la pantalla.
Producción
Ejemplo # 4
Aquí, pegamos el código de HTML a continuación para este ejemplo. Usamos el código anterior y creamos cambios menores en él. Simplemente eliminamos la clase de datos de párrafo y DIV en este ejemplo y creamos otro archivo CSS para este ejemplo.
Código CSS
La "altura" del contenedor en este ejemplo es "70px" y "el ancho" es "300px". Use la "posición" como "absoluta". Ahora, estamos dibujando el borde en el que establecemos su "ancho" igual a "4px", el borde mostrará "sólido", ya que el tipo de este borde se selecciona como "sólido". El color es "negro". Luego, configure el color de fondo interior en "blanco". El color de texto que estamos usando aquí es "negro". Ahora colocamos la propiedad de posición absoluta. Nuestro margen superior es "50%" y también lo mismo para el margen "izquierda". Establece el objeto "50%" desde la parte superior y también desde la izquierda. Vamos a usar la última propiedad, y esta es la propiedad "transformar". Transforma el objeto hacia atrás, la mitad de su ancho y también de la altura. Actuará en relación con el cuerpo del objeto. Revertirá la mitad reversa del objeto "50%" de su ancho y la mitad inversa de "50%" de su altura.
Producción
Conclusión
En este tutorial, hemos cubierto el concepto del centro de posición absoluta en CSS. Hemos explicado cómo centrar el objeto vertical y horizontalmente en ejemplos separados, y luego hemos proporcionado otros dos ejemplos en los que hemos centrado el objeto tanto vertical como horizontalmente al mismo tiempo. Hemos discutido cuatro ejemplos aquí en este tutorial. Hemos realizado todos los ejemplos y hemos pegado las capturas de pantalla de salida también. Aprenderá fácilmente este centro de posición absoluto en CSS después del estudio exhaustivo de este tutorial, y espero que sea muy útil para usted cuando lo pruebe usted mismo.