EverKB

Knowledge Base Ever

Two methods to set absolutely positioned elements such as div horizontally and vertically in CSS with CSS

2019-11-29 01:05:01

label: HTML, CSS, absolute, center, horiz-align, vertical-align, margin, Center up and down, center left and right, center in layers, center elements, login box

Background overview

Even if we understand the properties of each HTML element in the CSS language, it is still difficult to write pure CSS code when we need to set the vertical and horizontal centering of an absolutely positioned element.

If you searched here for this reason, then you can directly use the code of method two.

All browsers mentioned in this article do not include extremely old browsers that do not implement the marign:auto standard, nor browsers with negligible market share.

Direct method, by setting the left and top properties of the element

If you know the size of the parent element, you can set the left and top properties of the absolutely positioned HTML element to be centered; if you don't know the size of the parent element, we can get the width and height, css('width') and css('height') of the jQuery library. The size of the element, then set left and top.

Formula: left equals 50% minus half of element width, and top equals 50% minus half of element height.

It can be calculated by the calc of the CSS expression, it can also be set by setting the margin to the corresponding negative value, and it can also be set by shift.

This method is straightforward and effective, but not simple and elegant enough.


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

Automatic method: set margin to auto

This method is simple and works on modern browsers. The reliability of this method is determined by the consistency of the browser's typesetting engine implementation.
.el {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
In the last five years, we usually use this method to set the centering of an HTML element.

label

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