EverKB

Knowledge Base Ever

Dois métodos para definir elementos absolutamente posicionados, como div horizontal e verticalmente em CSS com CSS

2019-11-29 01:05:01

Etiqueta: HTML, CSS, absolute, center, horiz-align, vertical-align, margin, Centralizar para cima e para baixo, centralizar esquerda e direita, centralizar em camadas, elementos centrais, caixa de login

Visão geral do plano de fundo

Mesmo se entendermos as propriedades de cada elemento HTML na linguagem CSS, ainda será difícil escrever código CSS puro quando precisarmos definir a centralização vertical e horizontal de um elemento absolutamente posicionado.

Se você pesquisou aqui por esse motivo, pode usar diretamente o código do método dois.

Todos os navegadores mencionados neste artigo não incluem navegadores extremamente antigos que não implementam o padrão marign:auto, nem navegadores com participação de mercado insignificante.

Método direto, configurando as propriedades esquerda e superior do elemento

Se você conhece o tamanho do elemento pai, pode definir as propriedades esquerda e superior do elemento HTML absolutamente posicionado para centralizar; se você não souber o tamanho do elemento pai, podemos obter a largura e a altura, css('width') e css('height') da biblioteca jQuery O tamanho do elemento e defina esquerda e superior.

Fórmula: esquerda é igual a 50% menos metade da largura do elemento e parte superior é igual a 50% menos metade da altura do elemento.

Ele pode ser calculado pelo cálculo da expressão CSS, também pode ser definido definindo a margem para o valor negativo correspondente e também pode ser definido por turno.

Este método é direto e eficaz, mas não é simples e elegante o suficiente.


    
center me
/* CSS */
.el {
    width: 400px;
    height: 400px;
    position: absolute; 
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -200px;
}

Método automático: defina a margem como automática

Este método é simples e funciona em navegadores modernos. A confiabilidade desse método é determinada pela consistência da implementação do mecanismo de digitação do navegador.
.el {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
Nos últimos cinco anos, geralmente usamos esse método para definir a centralização de um elemento HTML.

Etiqueta

CentOS7 CentOS PHP Linux Python3 Python MySQL JavaScript MariaDB YUM Redis MySQL8 caching_sha2_password HTML mysql_native_password PHP7 CSS center Fatal Errors MongoDB4 sudoers .htaccess DATE_SUB Phalcon SQL Server 2017 WiFi Compiling PHP frequency conflict set_error_handler TestCase apr Elasticsearch7.3 PHPUnit ss5.conf daemon HTTP particles.js Slim Vincent Garreau Failed to build these modules: _uuid MongoDB Sudo DATE_ADD ip command pg_bha.conf SQL Server width Compiling Apache Frameworks MySQL-python scrollbar Tcp BBR Apache2.4 Elasticsearch libpython3.7m.so.1.0 PHPStorm ss5-3.8.9 CURLOPT_POSTFIELDS NodeJs show VIM Bluetooth Failed to build these modules: _ctypes Minimal ISO substr date sub INTERVAL PECL SQL Date Funcitons Wi-Fi CodeIgniter font-size root Tag Cloud apache httpd dual network interfaces Laravel ss5 CURLFille horiz-align node.js ShadowsocksR vertical-align BarManager exec mb_substr PyCharm SUBDATE date add IntelliJIDEA PEAR SOCKS5 Proxy Server WebStorm Chrome find remi Tag Apache du jQuery PHP5.5 src cURL hide nginx Shadowsocks-Python V2Ray availability eth0 MariaDB10.4 PostgreSQL sub folder date Install MongoDB pdo_sqlsrv SOCKS5 Web Server File Upload mssql-tools register_shutdown_function Symfony ADDDATE DevExpress JetBrain php-fpm sqlsrv Zend Framework height network interface Shadowsocks-Libev unixODBC-devel Aura error_get_last Port 80 string data INDENTIFIED BY password policy requirements SOCKS Web Development Fedora Media Writer msodbcsql Redis5 SVN absolute Deepin jemalloc SQLAlchemy convert FuelPHP mysqlclient Shadowsocks toggle at-symbol Error Control Operator margin PHPUnit Framework ss5.passwd daemon process IIS password SOCKET vps