在固定的浏览器的可视区域高度比中，内容高度自适应上下左右居中

最新推荐文章于 2023-09-07 20:11:36 发布

白菜喵喵

最新推荐文章于 2023-09-07 20:11:36 发布

阅读量207

点赞数

分类专栏：前端 css 文章标签： CSS布局 flexbox 居中对齐视口高度自适应

本文链接：https://blog.youkuaiyun.com/qq_36733408/article/details/128100113

版权

前端同时被 2 个专栏收录

1 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现页面元素在浏览器中占据50%可视区域高度并保持内容居中的方法。通过设置`height: 50vh`实现视口高度的百分比布局，结合`display: flex`和`align-items: center`确保内容在垂直方向上居中。示例代码包括一个占位符搜索框，整个布局适用于首页背景图或其他需要居中显示的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在浏览器的可视区域占比50%高度，内容高度自适应上下左右居中

比如占比50%的可视化高度：height: 50vh;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>屏幕高度占比自适应</title>
	</head>
	<style type="text/css">
		main {
			display: block;
		}
		h1{
			font-size: 2.441rem;
			font-weight: 600;
		}
		.main-wrapper {
			flex-direction: column;/*主轴的方向为从上到下*/
			height: 50vh; /*视窗高度的百分比*/
			margin-bottom: 2em;
		}
		.main-wrapper {
			display: flex;/*弹性布局*/
			align-items: center;/*定义项目在交叉轴上居中对齐*/
			color: #fbfeff;
			padding: 0.5em 1em;
			background: #1a3ea2;
		}

		.header-content {
			flex: 1;
			display: flex;
			text-align: center;
			flex-direction: column;
			justify-content: center;
		}
	</style>
	<body>
		<div>
			<div class="main-wrapper">
				<div class="header-content">
					<h1>Find</h1>
				</div>
			</div>
			<div class="" style="height: 800px;border: #333333 solid 1px;">
				
			</div>
		</div>
	</body>
</html>