实现居中的方式

最新推荐文章于 2023-03-01 09:20:36 发布

RRmh1128

最新推荐文章于 2023-03-01 09:20:36 发布

阅读量255

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/RRmh1128/article/details/121453680

版权

块元素的水平居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 300px;
				height: 300px;
				border: 10px solid #CCCCCC;
				position: relative;
			}
			#box span{
				display: block;
				width: 50px;
				height: 50px;
				background-color: red;
				position: absolute;
				left: 50%;
				margin-left: -25px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span></span>
		</div>
	</body>
</html>

用定位来实现居中，因为left：50%是盒子最左边的位置为准，所以居中的盒子要设置一个左外边距为其宽度的一半，
在这里插入图片描述

行内块元素的水平居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 300px;
				height: 300px;
				border: 10px solid #CCCCCC;
				text-align: center;
			}
			#box span{
				width: 50px;
				height: 50px;
				background-color: red;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span></span>
		</div>
	</body>
</html>

行内块只用在父盒子上加上text-align：centenr，就能实现子元素的居中
在这里插入图片描述

单行文本居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				margin: 0;
				padding: 0;
				border: 1px solid red;
				height: 100px;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<h1>单行文本居中</h1>
	</body>
</html>

单行文本居中只用让行高等于其高度就能居中
在这里插入图片描述

多行文本不固定高度垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			p{
				width: 200px;
				border: 1px solid red;
				background-color: #ccc;
				padding: 100px;
			}
		</style>
	</head>
	<body>
		<p>多行文本居中多行文本居中多行文本居中多行文本居中</p>
	</body>
</html>

多行文本居中设置padding值为宽度的一半
在这里插入图片描述

固定高度的多行文本居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#wrap{
				width: 400px;
				height: 600px;
				margin: 0 auto;
				display: table;
				border: 1px solid red;
			}
			p{		
				border: 1px solid red;
				background-color: #ccc;
				display: table-cell;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<p>固定高度多行文本居中固定高度多行文本居中固定高度多行文本居中</p>
		</div>
	</body>
</html>

display:table 成为一个块级表格元素,子元素display:table-cell使子元素成为表格单元格,就会变成单元格,设置单元格的垂直居中:verticle:middle.
在这里插入图片描述

固定高度的块级元素垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 300px;
				height: 300px;
				background-color: #ccc;
				position: absolute;
				left: 50%;
				margin-left: -150px;
				top: 50%;
				margin-top: -150px;
			}
		</style>
	</head>
	<body>
	</body>
	<div id="box">
		
	</div>
</html>

用定位居中要给居中元素设置margin值为其宽度和高度的一般，且值为负值
在这里插入图片描述

不固定高度的块级元素垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				padding: 20px;
				background-color: #ccc;
				position: absolute;
				left: 50%;
				top: 50%;
			}
		</style>
	</head>
	<body>
		<div id="box">
			块级不固定高度
		</div>
	</body>
</html>

在这里插入图片描述

flex垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				height: 500px;
				width: 500px;
				border: 10px solid #00BFFF;
				margin: 100px auto;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#aa{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="aa"></div>
		</div>
	</body>
</html>

在这里插入图片描述

RRmh1128

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现居中的方式

块元素的水平居中<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 300px; height: 300px; border: 10px solid #CCCCCC; position: relative; .
复制链接

扫一扫