§ ITPOW >> 文档 >> CSS

让登录框在浏览器上下左右居中的 3 种做法

作者:vkvi 来源:ITPOW(原创) 日期:2021-8-11

我们知道,指定 margin-leftmargin-rightauto 可以让一个元素左右居中

但是如何上下居中呢?这种应用场景在哪位登录页、欢迎页非常常见。

做法一

<!DOCTYPE html>

<html>

<head>
<style type="text/css">
html { height:100%; }
body { height:100%; }
body { display:flex; align-items:center; justify-content:center; }
div { width:200px; height:200px; background:#ff9; }
</style>
</head>

<body>
	<div></div>
</body>

</html>

做法二

<!DOCTYPE html>

<html>

<head>
<style type="text/css">
html { height:100%; }
body { height:100%; }
div { position:absolute; top:50%; left:50%; }
div { margin:-100px auto auto -100px; width:200px; height:200px; background:#ff9; }
</style>
</head>

<body>
	<div></div>
</body>

</html>

做法三

<!DOCTYPE html>

<html>

<head>
<style type="text/css">
div { position:absolute; top:0; bottom:0; left:0; right:0; }
div { margin:auto; width:200px; height:200px; background:#ff9; }
</style>
</head>

<body>
	<div></div>
</body>

</html>
相关文章