html垂直居中div中的元素

最新推荐文章于 2024-07-15 15:35:16 发布

m0_50498666

最新推荐文章于 2024-07-15 15:35:16 发布

阅读量114

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/m0_50498666/article/details/117821317

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先创建一个大div，然后中间套一个小div

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background: red;
				height: 500px;
				width: 500px;
			}
			.box2{
				background: blue;
				height:200px;
				width:200px;
				
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
		
	</body>

在这里插入图片描述
接下来将中间的蓝色块垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background: red;
				height: 500px;
				width: 500px;
				text-align: center;
			}
			.box2{
				background: blue;
				height:200px;
				width:200px;
				vertical-align: middle;
				display: inline-block;
			}
			.box1 span{
				height:100%;
				width:0px;
				vertical-align: middle;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<span></span>
			<div class="box2"></div>
		</div>
		
	</body>
</html>

在大div里面加入一个辅助元素span，用于进行垂直居中定位
它的高度设置为父元素的高度，宽度设置为0，意味将它隐藏掉，不予显示
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

m0_50498666

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html垂直居中div中的元素

先创建一个大div，然后中间套一个小div<head> <meta charset="utf-8"> <title></title> <style> .box1{ background: red; height: 500px; width: 500px; } .box2{ background: blue; height:200px; width:200px;
复制链接

扫一扫