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

最新推荐文章于 2024-01-22 21:39:04 发布

辣条小哥哥

最新推荐文章于 2024-01-22 21:39:04 发布

阅读量277

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44090040/article/details/116496824

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

水平居中：
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>

水平垂直居中：

绝对定位+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
评论
子元素如何在父元素中居中

水平居中：1.子父元素宽度固定，子元素设置margin：auto，并且子元素不能设置浮动，否则居中失效<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style> * { margin: 0; padding: 0; } .box { width: 50
复制链接

扫一扫

专栏目录