CSS之div实现水平垂直居中

最新推荐文章于 2023-02-21 21:13:29 发布

自豪听我的

最新推荐文章于 2023-02-21 21:13:29 发布

阅读量185

点赞数

分类专栏： css常见问题文章标签： css

本文链接：https://blog.csdn.net/xYY_X_xYY/article/details/116230929

版权

css常见问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

以下我们将从实现子盒子在父盒子中水平垂直居中效果。

子盒子必须定宽高，绝对定位+margin；前提给父盒子设置相对定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.parent{
				width: 500px;
				height: 500px;
				position: relative;
				border: 1px solid orange;
			}
			.parent .child{
				position: absolute;
				width: 200px;
				height: 200px;
				top: 50%;
				left: 50%;
			 	margin-top: -100px;
				margin-left: -100px; 
				background-color: #00ff00;
				
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child">
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
2. 子盒子定宽高（也可用内容直接撑开），绝对定位+transform；前提父盒子设置相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.parent{
				width: 500px;
				height: 500px;
				position: relative;
				border: 1px solid orange;
			}
			.parent .child{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate3d(-50%,-50%,0);
				background-color: #00ff00;
				
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child">
				不设定子盒子的高度、宽度，直接用内容撑开。
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
3. 使用table-cell方式；同样无所谓是否设置子盒子的宽高，可以用内容撑开。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.parent{
				display: table-cell;
				width: 500px;
				height: 500px;
				text-align: center;
				vertical-align: middle;
				border: 1px solid orange;
			}
			.parent .child{
				display: inline-block;
			/* width: 200px;
				height: 200px; */
				background-color: #00ff00;
				
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child">
				不设定子盒子的高度、宽度，直接用内容撑开。
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
4. 使用flex定位，同样不用给子盒子设置宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.parent{

				display: flex;
				width: 500px;
				height: 500px;
				border: 1px solid orange;
			}
			.parent .child{	
				margin: auto;
				background-color: #00ff00;			
			}

		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child">
				不设定子盒子的高度、宽度，直接用内容撑开。
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

自豪听我的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之div实现水平垂直居中

以下我们将从实现子盒子在父盒子中水平垂直居中效果。子盒子必须定宽高，绝对定位+margin；前提给父盒子设置相对定位。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .parent{ width: 500px; height: 500px; position: re.
复制链接

扫一扫

专栏目录