如何让div盒子或文字居中显示

最新推荐文章于 2023-01-02 14:59:08 发布

hello big_bear

最新推荐文章于 2023-01-02 14:59:08 发布

阅读量1.2w

点赞数 14

分类专栏： html基础文章标签： css html

本文链接：https://blog.csdn.net/big_beer/article/details/115527317

版权

html基础专栏收录该内容

15 篇文章 3 订阅

订阅专栏

本文介绍了如何使用CSS使div盒子和文字水平垂直居中。对于div，通过设置大盒子为flex布局并调整justify-content和align-items属性实现居中；对于文字，结合text-align和line-height属性实现居中显示。这些方法简洁有效，适用于多种场景。

摘要由CSDN通过智能技术生成

学习目标：

让div盒子居中显示的方法和让文字居中显示的方法

学习内容：

提示：这里可以添加要学的内容
例如：
1、让div盒子水平垂直居中的方式
2、让文字水平垂直居中的方式

div居中：

通过在大盒子设置flex布局让div居中显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>让div居中的方法</title>
	</head>
	<body>
	<div class="big_box">
		<div class="mini_box"></div>
	</div>
	</body>
	<style>
		.big_box{
			width: 600px;
			height: 600px;
			background-color: blue;
			display: flex;
			justify-content: center;/* 水平居中 */
			align-items: center;/* 垂直居中 */
			}
		.mini_box{
			width: 200px;
			height: 200px;
			background-color: red;
			}
	</style>
</html>

效果图：
在这里插入图片描述

文字居中：

让文字居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>让文字居中的方法</title>
	</head>
	<body>
	<div class="big_box">
		<span class="wenzi">我是文字，我要居中显示</span>
	</div>
	</body>
	<style>
		.big_box{
			width: 600px;
			height: 600px;
			background-color: lightgreen;	
			text-align: center;/* 在父级元素设置这个样式可以让里面的文字水平居中 */
			}
		.wenzi{		
			line-height: 600px;/* 利用这个样式设置line-height等于父级元素的高度可以让文字垂直居中 */
			}
	</style>
</html>