CSS中div垂直居中以及div中元素/文字居中

最新推荐文章于 2023-07-14 13:32:49 发布

猫儿念你

最新推荐文章于 2023-07-14 13:32:49 发布

阅读量175

点赞数 1

分类专栏：前端学习-原创

本文链接：https://blog.csdn.net/qq_35779070/article/details/104908080

版权

前端学习-原创专栏收录该内容

35 篇文章 0 订阅

订阅专栏

转载请注明出处：https://blog.csdn.net/qq_35779070/article/details/104908080

一、div垂直居中

（一）当width和height大小为百分比时，实现方法：

使用CSS的transform属性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
			}
			#div1{
				height: 30%;
				width: 30%;
				background-color: #FF0000;
				
				position: relative;
				top: 50%;
				transform: translateY(-50%);/*元素向下移动自身高度50%的距离*/
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>
</html>

运行效果：
transform方法
2. CSS的弹性布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
			}
			#div1{
				height: 30%;
				width: 30%;
				background-color: #FF0000;
				
				display: flex;
				align-items: center;/*定义div1的元素垂直居中*/
				justify-content: center;/*定义div1的里的元素水平居中*/
			}
			#div2{
				width: 50%;
				height: 50%;
				background: green;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				
			</div>
		</div>
	</body>
</html>

运行效果：
flex布局方法
3. 绝对定位方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
			}
			#div1{
				height: 30%;
				width: 30%;
				background-color: #FF0000;
				
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
			#div2{
				width: 50%;
				height: 50%;
				background: green;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				
			</div>
		</div>
	</body>
</html>

运行效果：
绝对定位方式
（二）当width和height大小固定时，实现方法：

相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
				background-color: #008000;
			}
			#div1{
				height: 200px;
				width: 300px;
				background-color: red;
				margin: 0 auto;
				position: relative;
				top: 50%;
				margin-top:-100px;/*设置为height的一半*/
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>
</html>

运行效果：
固定高度方式
（三）文本垂直居中，实现方法：

1.单行文本
设置line-height和height相同大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				height: 200px;
				background-color: #008000;
				line-height: 200px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="div1">单行文本垂直居中</div>
	</body>
</html>

运行效果：
line-height方式
2.多行文本
flex布局【align-items：center】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				height: 200px;
				width: 300px;
				background-color: #008000;
				/* line-height: 200px;
				text-align: center; */
				display: flex;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中
		</div>
	</body>
</html>

运行效果：
flex布局方式
flex布局【内部元素margin：auto 0】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				height: 200px;
				width: 300px;
				background-color: #008000;
				/* line-height: 200px;
				text-align: center; */
				display: flex;
				
			}
			p{
				margin: auto 0;
			}
		</style>
	</head> 
	<body>
		<div id="div1">
			<p>多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中
</p>
					</div>
	</body>
</html>

运行效果：
flex布局margin-auto
display：table-cell+vertical-align：middle

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				height: 200px;
				width: 300px;
				background-color: #008000;
				/* line-height: 200px;
				text-align: center; */
				display: table-cell;
				vertical-align: middle;				
			}
		</style>
	</head> 
	<body>
		<div id="div1">
			多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中
					</div>
	</body>
</html>

运行效果：
表格方式

猫儿念你

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中div垂直居中以及div中元素/文字居中

一、div垂直居中（一）当width和height大小为百分比时，实现方法：使用CSS的transform属性：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&g...
复制链接

扫一扫