水平居中和垂直居中

最新推荐文章于 2024-03-27 20:04:50 发布

小梦新靓

最新推荐文章于 2024-03-27 20:04:50 发布

阅读量382

点赞数

本文链接：https://blog.csdn.net/qq_43712187/article/details/89288887

版权

盒子的水平居中和垂直居中

text-align:center一般是用来规定文本和内联元素的水平居中对齐，如果想要让块级水平居中对齐，一般使用margin:0px auto来实现

单独父盒子垂直居中直接给父盒子写

margin：垂直像素   auto；

想让嵌套盒子居中
----方案一：给嵌套的盒子写：margin:垂直像素 auto；之后给父盒子写overflow:hidden清除盒子塌陷问题不清楚父盒子随着嵌套的盒子一起下来

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>嵌套盒子</title>
	<style>
		*{
			padding:0px;
			margin: 0px;
		}
		.father{
			width: 400px;
			height: 400px;
			background-color: red;
			margin: 100px auto;
			overflow: hidden;
		}
		.son{
			width: 300px;
			height: 200px;
			background:pink;
			margin: 100px auto;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">
			<div class="son1"></div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述
—方案二：
给父盒子设置内边距：padding：上左下右；它会撑大盒子的宽度之后清除用box-sizing:border-box;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>嵌套盒子</title>
	<style>
		*{
			padding:0px;
			margin: 0px;
		}
		.father{
			width: 400px;
			height: 400px;
			background-color: red;
			margin: 100px auto;
			padding: 100px;
			box-sizing: border-box;
		}
		.son{
			width: 200px;
			height: 200px;
			background:pink;
			
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">
			<div class="son1"></div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述
方案三：定位的盒子如何水平居中

position:relative;
left:50%;
margin-left:-他的一半；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>嵌套盒子</title>
	<style>
		*{
			padding:0px;
			margin: 0px;
		}
		.father{
			width: 400px;
			height: 400px;
			background-color: red;
			margin: 200px auto;

		}
		.son{
			width: 200px;
			height: 200px;
			background:pink;
			//水平居中
			position: relative;
			left:50%;
			margin-left: -100px;
			垂直的margin-top没有用得给父元素加一个overflow：hidden；
			top:50%;
			margin-top:-100px;

			
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">
			<div class="son1"></div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述
—方案四：
可以利用定位来让盒子居中
子绝夫相
1，line-height: 100px; 只对文本有效果，对定宽高的div是没有用的。所以在文本水平垂直居中时使用。

text-align
我们在实际工作中常会遇到需要设置水平居中场景，今天我们就来看看怎么设置水平居中的。
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0px;
		margin: 0px;
	}
	div{
		width: 500px;
		height: 300px;
		border: 1px solid #000;
		text-align: center;
		line-height:300px
	}
	</style>
</head>
<body>
	<div>  小长假亲·牛仔裤不能创建·</div>
</body>
</html>

在这里插入图片描述

小梦新靓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
水平居中和垂直居中

盒子的水平居中和垂直居中text-align:center一般是用来规定文本和内联元素的水平居中对齐，如果想要让块级水平居中对齐，一般使用margin:0px auto来实现单独父盒子垂直居中直接给父盒子写margin：垂直像素 auto；想让嵌套盒子居中----方案一：给嵌套的盒子写：margin:垂直像素 auto；之后给父盒子写overflow:hidden清除盒子塌陷...
复制链接

扫一扫