CSS实现居中方法

最新推荐文章于 2023-05-29 23:27:46 发布

qq_1577697991

最新推荐文章于 2023-05-29 23:27:46 发布

阅读量118

点赞数

分类专栏： WEB基础

本文链接：https://blog.csdn.net/qq_35919219/article/details/88805016

版权

WEB基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS实现居中

块级元素居中

position实现块级元素在父元素居中 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.d1{
				width: 800px;
				height: 600px;
				border: 1px solid;
				position: relative;
			}
			.d2{
				width: 50%;
				height: 50%;
				overflow: auto;
				margin: auto;
				position: absolute;
				top:0;
				left: 0;
				right: 0;
				bottom: 0;
				background: #00BFFF;
			}
		</style>
	</head>
	<body>
		<div class="d1">
			<div class="d2"></div>
		</div>
	</body>
</html>

position实现块级元素在父元素居中 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.d1{
				width: 800px;
				height: 600px;
				border: 1px solid;
				position: relative;
			}
			.d2{
				width: 100px;
				height: 100px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -50px;
				margin-top: -50px;
				background: greenyellow;
			}
			
		</style>
	</head>
	<body>
		<div class="d1">
			<div class="d2">
				<div class="d3"></div>
			</div>
		</div>
	</body>
</html>

display实现块级元素在父元素居中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.d1{
				width: 800px;
				height: 600px;
				border: 1px solid;
				display: table;
			}
			.d2{
				width: 100px;
				height: 100px;
				display: table-cell;
				vertical-align: middle;
			}
			.d3{
				margin: auto;
				width: 50px;
				height: 50px;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div class="d1">
			<div class="d2">
				<div class="d3"></div>
			</div>
		</div>
	</body>
</html>

文本居中

display实现文本居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.d1{
				width: 800px;
				height: 600px;
				border: 1px solid;
				display: table;
			}
			.d2{
				width: 100px;
				height: 100px;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="d1">
			<div class="d2">hello!</div>
		</div>
	</body>
</html>

实现文本居中2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.d1{
				width: 800px;
				height: 60px;
				border: 1px solid;
				display: table;
			}
			p{
				text-align: center;
				line-height: 60px;
			}
		</style>
	</head>
	<body>
		<div class="d1">
			<p>hello!</p>
		</div>
	</body>
</html>