三种方法让子元素在父元素中水平垂直居中

最新推荐文章于 2024-03-29 09:55:44 发布

ysn121101

最新推荐文章于 2024-03-29 09:55:44 发布

阅读量1.3k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ysn121101/article/details/99334156

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平垂直居中</title>
</head>
<style>
	/*子元素在父元素中水平垂直居中的三种方法*/
	.one{
		height: 200px;
		width: 200px;
		border: 2px solid #ccc;
		position: relative;
		background-color: lightblue;
	}
	.one_content{
		height: 100px;
		width: 100px;
		border: 2px solid #ccc;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin:auto;
		background-color: pink;
	}
	.two{
		height: 200px;
		width: 200px;
		border: 2px solid #ccc;
		position: relative;
	}
	.two_content{
		height: 100px;
		width: 100px;
		border: 2px solid #ccc;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -50px;
		margin-top: -50px;
		background-color: yellow;
	}
	.three{
		height: 200px;
		width: 200px;
		border: 2px solid #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.three_content{
		height: 100px;
		width: 100px;
		border: 2px solid #ccc;
		background-color: red;
	}
</style>
<body>
	<div class="one">
		<div class="one_content"></div>
	</div>
	<div class="two">
		<div class="two_content"></div>
	</div>
	<div class="three">
		<div class="three_content"></div>
	</div>
</body>
</html>

在这里插入图片描述

ysn121101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种方法让子元素在父元素中水平垂直居中

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水平垂直居中</title></head><style> /*子元素在父元素中水平垂直居中的三种方法*/ .one{ height: 200px;...
复制链接

扫一扫