子元素在父元素中如何水平垂直居中，即放置在最中心位置

最新推荐文章于 2024-06-03 18:53:48 发布

长安梦我

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量646

点赞数 2

分类专栏： CSS 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/zhongqingtian/article/details/124996483

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如何将子元素水平垂直居中，放置父元素中？

子元素在父元素中水平垂直居中，有以下几种方法：

1、外间距

2、内间距

3、相对定位，绝对定位

4、通过位移函数变换

话不多说，上代码：

1、外间距

		<style type="text/css">
			.father{
				width: 300px;
				height: 300px;
				background-color: greenyellow;
				overflow: hidden;
			}
			.son{
				width: 100px;
				height: 100px;
				background-color: hotpink;
				margin:100px 100px;
			}
		</style>

	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>

2、内间距（改变了父元素的大小）

		<style type="text/css">
			.father{
				width: 300px;
				height: 300px;
				background-color: greenyellow;
				padding-top:200px;
				padding-left:200px;
			}
			.son{
				width: 100px;
				height: 100px;
				background-color: hotpink;
			}
		</style>

	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>

3、相对定位，绝对定位

		<style type="text/css">
			.father{
				width: 300px;
				height: 300px;
				background-color: greenyellow;
				position:relative
			}
			.son{
				width: 100px;
				height: 100px;
				background-color: hotpink;
				position:absolute;
				left:100px;
				top:100px;
			}
		</style>

	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>

4、通过位移函数变换(不需要管原来元素多大，固定写百分比即可)

		<style type="text/css">
			.father{
				width: 300px;
				height: 300px;
				background-color: greenyellow;
				position:relative;
			}
			.son{
				width: 100px;
				height: 100px;
				background-color: hotpink;
				position:absolute;
				left:50%;
				top:50%;
				transform:translate(-50%,-50%);
				
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>

以上就是css中简单而又好用的几种将一个子元素水平垂直居中于父元素的方法~~