flex实现水平垂直居中

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;
 
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
 
        </div>
    </div>
</body>
</html>

运行结果

在这里插入图片描述

posted @ 2023-08-30 10:09 前端导师歌谣阅读(36) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 220230823-flex实现水平垂直居中

· 实现两盒子垂直水平居中定位方式

· [CSS] CSS display:flex实现内容水平垂直居中展示

· css水平垂直居中

· 水平垂直居中的实现

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

flex实现水平垂直居中

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>flex</title>
	<style>
	.father{
	width: 300px;
	height: 300px;
	background-color: aqua;
	display: flex;
	justify-content: center;
	align-items: center;

	}
	.son{
	width: 200px;
	height: 200px;
	background-color: red;
	}
	</style>
	</head>
	<body>
	<div class="father">
	<div class="son">

	</div>
	</div>
	</body>
	</html>

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

flex实现水平垂直居中

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识