css系列—垂直居中总结

本是古典何须时尚 2022-01-23 05:51 247阅读 0赞

**子元素不定高或者定高定位法**

>         水平居中：定位法
> 
>         1.子元素不定高或者不定高
> 
>         2.子元素为绝对定位，并设置top:50%
> 
>         3.子元素添加transform: translate(0,-50%);

<!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;
    	top: 50%;
    	/* 可以使元素移动时相对于自身的宽度和高度。 */
    	transform: translate(0,-50%);
    }
    
    </style>
    <body>
    	<div class="md-warp">
    		<span class="md-main">不定宽</span>
    	</div>
    	<script>
    		/**
    		水平居中：定位法
    		1.子元素不定高或者不定高
    		2.子元素为绝对定位，并设置top:50%
    		3.子元素添加transform: translate(0,-50%);
    		 */
    	</script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

**单行文本垂直居中**

> 元素内容是单行，并且其高度是固定不变的。
> 
> 将其**line-height**设置成和**height**的值一样

<div><span>这是一段文字</span></div>
    div{
    	width: 400px;
    	height: 300px;
    	border: 1px solid #000;
    }
    span{
    	line-height: 300px;
    }

![v2-e5a46a43142c5a8fdd4dc2c924ee417a_hd.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220123/d985e3c646e44b7d93d6aed0e2e43b55.png
[v2-e5a46a43142c5a8fdd4dc2c924ee417a_hd.png]: /images/20220123/ac1a4f955989441e89790f5236556c55.png