EverKB

Knowledge Base Ever

HTML中用CSS设置绝对定位元素如div的水平居中和垂直居中的两种方法

2019-11-29 01:05:01

标签: HTML, CSS, absolute, center, horiz-align, vertical-align, margin, 上下居中, 左右居中, 层居中, 元素居中, 登录框

背景概述

即使了解了CSS语言中各HTML元素的属性,在需要设置一个绝对定位元素的垂直居中和水平居中时,我们仍然很难写出纯粹的CSS代码。

如果你是因为这个原因而搜索到这里,那么你可以直接使用方法二的代码。

本文中提到的所有浏览器,不包括未实现marign:auto的标准的极老的浏览器,也不包括市场占有率可忽略的浏览器。

直接方法,通过设置元素的left和top属性

如果知道父元素的大小,可以通过设置绝对定位HTML元素的left和top属性设置居中;如果不知道父元素的大小,我们可以通过jQuery库的width和height,css('width')和css('height')来获得元素的大小,再设置left和top。

公式:left等于50%减去元素宽度的一半,top等于50%减去元素高度的一半。

可以通过CSS表达式的calc来计算,也可以通过设置外边距为相应的负值来设置,还可以使用移位来设置。

这种方法直接而有效,但不够简单优雅。


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

自动方法:设置margin为auto

这个方法很简单,而且在现代浏览器上都有效。这个方法的可靠性是浏览器的排版引擎实现上的一致性决定的。
.el {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
在近五年中,我们通常使用这种方法来设置一个HTML元素的居中。

标签

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