HTML中利用CSS3中的Flex布局让子块级元素在父块级元素中绝对居中的一种方法

最新推荐文章于 2023-01-04 13:33:24 发布

全栈老司机

最新推荐文章于 2023-01-04 13:33:24 发布

阅读量710

点赞数

分类专栏： CSS 文章标签： css html html5 css3 前端

本文链接：https://blog.csdn.net/qq_35421305/article/details/115245875

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

说明：
（1）CSS是一个逻辑性不强的编程语言，相对于其他语言，经验显得更加重要。
（2）在Flex布局出现以前，相对于水平居中，实现垂直居中是一件比较麻烦的事情。

准备工作：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对居中</title>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

<style>
	.father{
		width: 600px;
		height: 600px;
		background: blue;
	}
	.son{
		width: 300px;
		height: 300px;
		background: green;
	}
</style>

创建父子两个div，如果没有特别设置，父子div的相对位置如下图所示：
在这里插入图片描述

绝对居中

利用flex布局，在父块级元素中的css中只需要3句代码搞定水平方向和垂直方向都居中：

.father{
    display: flex;
    justify-content: center;
    align-items: center;
}

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

全栈老司机

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML中利用CSS3中的Flex布局让子块级元素在父块级元素中绝对居中的一种方法

准备工作：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>绝对居中</title></head><body> <div class="father"> <div class="son"></div> </div></body></htm
复制链接

扫一扫