子元素如何在父元素中居中

水平居中:
1.子父元素宽度固定,子元素设置margin:auto,并且子元素不能设置浮动,否则居中失效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 500px;
			height: 500px;
			background-color: pink;
		}
		.item {
			width: 200px;
			height: 200px;
			background-color: yellow;
			margin:auto;
		}
	</style>
	<body>
		<div class="box">
			<div class="item"></div>
		</div>
	</body>
</html>

在这里插入图片描述
2.子父元素宽度固定,父元素设置text-align:center,子元素设置display:inline-block,并且子元素不能设置浮动,否则居中失效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 500px;
			height: 500px;
			background-color: pink;
			text-align: center;
		}
		.item {
			width: 200px;
			height: 200px;
			background-color: yellow;
			display: inline-block;
		}
	</style>
	<body>
		<div class="box">
			<div class="item"></div>
		</div>
	</body>
</html>

水平垂直居中:

  1. 绝对定位+margin:auto
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 500px;
			height: 500px;
			background-color: pink;
			position: relative;
		}

		.item {
			width: 200px;
			height: 200px;
			background-color: yellow;
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	</style>
	<body>
		<div class="box">
			<div class="item"></div>
		</div>
	</body>
</html>

在这里插入图片描述
2、绝对定位+margin反向偏移

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 500px;
			height: 500px;
			background-color: pink;
			position: relative;
		}

		.item {
			width: 200px;
			height: 200px;
			background-color: yellow;
			position: absolute;
			left: 50%;
			top:50%;
			margin-left: -100px;
			margin-top: -100px;
		}
	</style>
	<body>
		<div class="box">
			<div class="item"></div>
		</div>
	</body>
</html>

3、绝对定位+transform反向偏移

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 500px;
			height: 500px;
			background-color: pink;
			position: relative;
		}

		.item {
			width: 200px;
			height: 200px;
			background-color: yellow;
			margin: auto;
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);

		}
	</style>
	<body>
		<div class="box">
			<div class="item"></div>
		</div>
	</body>
</html>

4、display:tabel

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		.parent { 
		    display: table; 
		    width: 300px; 
		    height: 300px;
			background-color:red;
		    text-align: center; 
		} 
		.son { 
		    display: table-cell; 
			width:200px;
		    height: 200px; 
		    background-color: yellow; 
		    vertical-align: middle; 
		}
	</style>
	<body>
		<div class="parent">
		    <div class="son">
		        5656
		    </div>
		</div>
	</body>
</html>

5、display: inline-block

.wrp5 {
    text-align: center;
    overflow: auto;
}
.box5 {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
}
.wrp5:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-left: -0.25em;
    /* To offset spacing. May vary by font */
}

6、display: flex-box

.wrp6 {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
 
.box6 {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值