关于div元素居中

最新推荐文章于 2025-01-29 00:15:00 发布

aq9527

最新推荐文章于 2025-01-29 00:15:00 发布

阅读量503

点赞数 1

分类专栏： html css 文章标签： div居中 position

本文链接：https://blog.youkuaiyun.com/aq9527/article/details/88776059

版权

html 同时被 2 个专栏收录

2 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文通过四个示例演示了如何使用flex布局及绝对定位实现元素在容器内的水平垂直居中。包括利用flex属性justify-content和align-items实现居中，以及通过设置绝对定位元素的margin属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看图

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				font-size: 17px;
			}
			.main{
				display: flex;
				flex-wrap: wrap;
			}
			.demo {
				width: 300px;
				height: 300px;
				border: 1px solid purple;
				display: flex;
				justify-content: center;
				/*水平居中*/
				align-items: center;
				/*垂直居中*/
			}

			.inner {
				width: 100px;
				height: 100px;
				font-size: 26px;
				border: 1px solid red;
				background-color: antiquewhite;
			}
			.demo2 {
				width: 300px;
				height: 300px;
				border: 1px solid red;
				position: relative;
			}
			.inner2 { 
				width: 100px;
				height:100px;
				border: 1px solid black;
				background-color: greenyellow;
		
				position: absolute;
				margin: 0 auto;
				left:0;
				right:0;
				/* top:0; */
				/* bottom:0 */
			}
			.demo3 {
				width: 300px;
				height: 300px;
				border: 1px solid red;				
				position: relative;
			}
			.inner3 { 
				width: 100px;
				height:100px;
				border: 1px solid black;
				background-color: greenyellow;
				
				position: absolute;
				margin-top: auto;
				margin-bottom: auto;
				top:0;
				bottom:0;
			}
			.demo4 {
				width: 300px;
				height: 300px;
				border: 1px solid red;				
				position: relative;
			}
			.inner4 { 
				width: 100px;
				height:100px;
				border: 1px solid black;
				background-color: greenyellow;
				
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="demo">
				<div class="inner">
					<span>demo:</br>flex垂直居中</p>
				</div>
			</div>
			<div class="demo2">
				<div class="inner2">
					<span>demo2:<br />
					绝对定位水平居中</span>
				</div>
			</div>
			<div class="demo3">
				<div class="inner3">				
				<span>demo3:<br />绝对定位垂直居中</span>
				</div>
			</div>
			<div class="demo4">
				<div class="inner4">	
					<span>demo4:<br />绝对定位水平垂直居中</span>
				</div>
			</div>
		</div>
	</body>
</html>

可参考文章

1.水平垂直居中——position与margin的结合使用

https://blog.youkuaiyun.com/fxss5201/article/details/73755275

2.30分钟彻底弄懂flex布局