justify-content和align-items实现居中登陆界面

最新推荐文章于 2024-05-15 16:32:50 发布

Pikatt

最新推荐文章于 2024-05-15 16:32:50 发布

阅读量3.5k

点赞数 1

分类专栏：未分类文章标签： justify-content 登陆界面垂直居中

本文链接：https://blog.csdn.net/qq_39397845/article/details/80472277

版权

未分类专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、注意事项

用justify-content和align-items实现居中时：

1、父元素要设置具体的width和height。

2、display为flex。

3、justify-content与align-items配合使用。

2、实现效果图及代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>登陆</title>
	<style type="text/css">
		html{
			width: 100%;
		    height: 100%;
		}
		body{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#login{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 300px;
			height: 300px;
			border: 1px black solid; 
		}
	</style>
</head>
<body>
	<div id="login">
		<h1>登陆</h1>
		<input type="text"><br>
		<input type="password"><br>
		<button>确定</button>
	</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Pikatt

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
justify-content和align-items实现居中登陆界面

1、注意事项用justify-content和align-items实现居中时：1、父元素要设置具体的width和height。2、display为flex。3、justify-content与align-items配合使用。2、实现效果图及代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt;...
复制链接

扫一扫