EverKB

Knowledge Base Ever

Deux méthodes pour définir des éléments en position absolue tels que div horizontalement et verticalement en CSS avec CSS

2019-11-29 01:05:01

Étiquette: HTML, CSS, absolute, center, horiz-align, vertical-align, margin, Centrer de haut en bas, centrer à gauche et à droite, centrer en couches, éléments centraux, zone de connexion

Contexte général

Même si nous comprenons les propriétés de chaque élément HTML dans le langage CSS, il est toujours difficile d'écrire du code CSS pur lorsqu'il faut définir le centrage vertical et horizontal d'un élément à positionnement absolu.

Si vous avez cherché ici pour cette raison, vous pouvez directement utiliser le code de la méthode deux.

Tous les navigateurs mentionnés dans cet article n'incluent pas les très vieux navigateurs qui n'implémentent pas le standard marign:auto, ni les navigateurs dont la part de marché est négligeable.

Méthode directe, en définissant les propriétés left et top de l'élément

Si vous connaissez la taille de l'élément parent, vous pouvez définir les propriétés gauche et supérieure de l'élément HTML positionné de manière absolue, si vous ne connaissez pas la taille de l'élément parent, vous pouvez obtenir la largeur et la hauteur, css('width') et css('height') de la bibliothèque jQuery. La taille de l'élément, puis définie à gauche et en haut.

Formule: gauche = 50% moins la moitié de la largeur de l'élément, et haut = 50% moins la moitié de la hauteur de l'élément.

Il peut être calculé à l'aide du calcul de l'expression CSS, il peut également être défini en définissant la marge sur la valeur négative correspondante et par décalage.

Cette méthode est simple et efficace, mais pas assez simple et élégante.


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

Méthode automatique: définir la marge sur auto

Cette méthode est simple et fonctionne sur les navigateurs modernes. La fiabilité de cette méthode est déterminée par la cohérence de la mise en œuvre du moteur de composition du navigateur.
.el {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
Au cours des cinq dernières années, nous avons généralement utilisé cette méthode pour définir le centrage d'un élément HTML.

Étiquette

CentOS7 CentOS PHP Linux Python3 Python MySQL MariaDB YUM JavaScript CSS Redis MySQL8 caching_sha2_password HTML mysql_native_password PHP7 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 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

Dernier article