css系列—水平居中总结

最新推荐文章于 2023-07-04 18:00:19 发布

jiaojsun

最新推荐文章于 2023-07-04 18:00:19 发布

阅读量236

点赞数

分类专栏： css系列

本文链接：https://blog.csdn.net/jiaojsun/article/details/90741553

版权

css系列专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文有参考https://zhuanlan.zhihu.com/p/24419350

水平居中

子元素定宽margin法

满足以下三个条件

        1.子元素定宽

        2.子元素为块级元素（行内元素设置为display:block也算）

        3.子元素的margin-left和margin-right都必须为auto

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<style>
.md-warp{
	width: 400px;
	height: 300px;
	border: 1px solid #000;
}
.md-main{
	display: block;
	width: 100px;
	height: 100px;
	background: #f00;
}

.md-main{
	margin: 0 auto;
}
</style>
<body>
	<div class="md-warp">
		<span class="md-main"></span>
	</div>
	<script>
		/**
		水平居中：margin法
		1.子元素定宽
		2.子元素为块级元素（行内元素设置为display:block也算）
		3.子元素的margin-left和margin-right都必须为auto
		 */
	</script>
</body>
</html>

子元素定宽定位法

需要满足三个条件

1.子元素绝对定位，定宽

2.子元素left为50%

3.子元素margin-left:-(元素宽度/2)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<style>
.md-warp{
	width: 400px;
	height: 300px;
	border: 1px solid #000;
}
.md-main{
	display: block;
	width: 100px;
	height: 100px;
	background: #f00;
}

.md-warp{
	position: relative;
}
.md-main{
	position: absolute;
	left: 50%;
	margin-left: -50px;
}
</style>
<body>
	<div class="md-warp">
		<span class="md-main"></span>
	</div>
	<script>
		/**
		水平居中：定位法
		1.子元素定宽
		2.子元素为绝对定位，并设置left:50%
		3.子元素的margin-left为其宽度的一半负值
		 */
	</script>
</body>
</html>

子元素不定宽定位法

        水平居中：定位法

        1.子元素不定宽

        2.子元素为绝对定位，并设置left:50%

        3.子元素添加transform: translate(-50%,0);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<style>
.md-warp{
	width: 400px;
	height: 300px;
	border: 1px solid #000;
}
.md-main{
	display: block;
	/* width: 100px; */
	height: 100px;
	background: #f00;
}

.md-warp{
	position: relative;
}
.md-main{
	position: absolute;
	left: 50%;
	/* 可以使元素移动时相对于自身的宽度和高度。 */
	transform: translate(-50%,0);
}

</style>
<body>
	<div class="md-warp">
		<span class="md-main">不定宽</span>
	</div>
	<script>
		/**
		水平居中：定位法
		1.子元素不定宽
		2.子元素为绝对定位，并设置left:50%
		3.子元素添加transform: translate(-50%,0);
		 */
	</script>
</body>
</html>

文字水平居中

对于单行文字来说，直接使用text-align: center即可。

jiaojsun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css系列—水平居中总结

本文有参考https://zhuanlan.zhihu.com/p/24419350水平居中子元素定宽margin法满足以下三个条件1.子元素定宽2.子元素为块级元素（行内元素设置为display:block也算）3.子元素的margin-left和margin-right都必须为auto<!DOCT...
复制链接

扫一扫

专栏目录