EverKB

Knowledge Base Ever

Zwei Methoden, um absolut positionierte Elemente wie div horizontal und vertikal in CSS mit CSS zu setzen

2019-11-29 01:05:01

Label: HTML, CSS, absolute, center, horiz-align, vertical-align, margin, Oben und unten zentrieren, links und rechts zentrieren, in Ebenen zentrieren, Elemente zentrieren, Anmeldefeld

Hintergrundübersicht

Selbst wenn wir die Eigenschaften jedes HTML-Elements in der CSS-Sprache verstehen, ist es immer noch schwierig, reinen CSS-Code zu schreiben, wenn wir die vertikale und horizontale Zentrierung eines absolut positionierten Elements festlegen müssen.

Wenn Sie aus diesem Grund hier gesucht haben, können Sie den Code der zweiten Methode direkt verwenden.

Alle in diesem Artikel erwähnten Browser enthalten keine extrem alten Browser, die den marign:auto - Standard nicht implementieren, noch Browser mit vernachlässigbarem Marktanteil.

Direkte Methode, indem Sie die linken und oberen Eigenschaften des Elements festlegen

Wenn Sie die Größe des übergeordneten Elements kennen, können Sie festlegen, dass die linken und oberen Eigenschaften des absolut positionierten HTML-Elements zentriert werden. Wenn Sie die Größe des übergeordneten Elements nicht kennen, können Sie die Breite und Höhe, css('width') und css('height') der jQuery-Bibliothek abrufen Die Größe des Elements wird dann links und oben eingestellt.

Formel: left entspricht 50% minus der Hälfte der Elementbreite und top entspricht 50% minus der Hälfte der Elementhöhe.

Es kann durch die Berechnung des CSS-Ausdrucks berechnet werden, es kann auch durch Setzen des Rands auf den entsprechenden negativen Wert festgelegt werden, und es kann auch durch Verschiebung festgelegt werden.

Diese Methode ist einfach und effektiv, aber nicht einfach und elegant genug.


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

Automatische Methode: Rand auf automatisch setzen

Diese Methode ist einfach und funktioniert in modernen Browsern. Die Zuverlässigkeit dieser Methode wird durch die Konsistenz der Implementierung der Browserset-Engine bestimmt.
.el {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
In den letzten fünf Jahren verwenden wir normalerweise diese Methode, um die Zentrierung eines HTML-Elements festzulegen.

Label

CentOS7 CentOS PHP Linux Python3 Python MySQL MariaDB YUM JavaScript MySQL8 caching_sha2_password HTML mysql_native_password PHP7 CSS Redis 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 center Fatal Errors MongoDB4 sudoers .htaccess DATE_SUB Phalcon SQL Server 2017 WiFi

Letzter Artikel