css系列—水平居中总结

末蓝、 2022-01-23 05:47 216阅读 0赞

本文有参考[https://zhuanlan.zhihu.com/p/24419350][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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

**子元素定宽定位法**

> 需要满足三个条件
> 
> 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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

**子元素不定宽定位法**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

**文字水平居中**

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

[https_zhuanlan.zhihu.com_p_24419350]: https://zhuanlan.zhihu.com/p/24419350
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220123/05a7ce9bad5e48e387115519079e169c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220123/92ac7bf2779b480cae6e8745b85a9e39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220123/0492a2dc161f4bacba84fe8126e75bfb.png