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

学习目标：让div盒子居中的方法和让文字居中显示的方法学习内容：提示：这里可以添加要学的内容例如：1、让div盒子水平垂直居中的方式2、让文字水平垂直居中的方式div居中：通过在大盒子设置flex布局让div居中显示<!DOCTYPE html><html><head><meta charset="utf-8"><title>让div

hello big_bear

12803人浏览 · 2021-04-08 18:14:19

hello big_bear · 2021-04-08 18:14:19 发布

学习目标：

让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>