元素水平居中和垂直居中的方式总结

最新推荐文章于 2021-10-09 18:06:10 发布

dandantang_enjoy

最新推荐文章于 2021-10-09 18:06:10 发布

阅读量310

点赞数

分类专栏： css样式

css样式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. line-height使单行文本垂直居中

对于单行文本，可以设置它的行高等于它父容器的高度，这样就实现了该文本的垂直居中，但是此方法只适用于单行文本。

对于多行文本，设置line-height就无法实现了，在这里有一个方法比较好。

即给父盒子一个display：table；子盒子设置：display：table-cell即可

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		*{margin:0;padding:0;}
            div{
                margin: 50px auto;
                width: 600px;
                height: 100px;
                line-height: 100px;
                font-size: 20px;
                font-weight: bold;
                color: #ff1493;
                background-color: #fff;
                box-shadow: 0 0 5px #000;
                border-radius: 10px;
            }
            .box2{
                color: #800000;
            }
            .box3{
                display: table;
                margin-top: 200px;
            }
            .box3 span{
                display: table-cell;
                vertical-align: middle;
                line-height: 20px;
            }
    	</style>
    </head>
    <body>
    	<div class="box1">
            这段文字想要居中！这段文字想要居中！这段文字想要居中！
    	</div>
        <div class="box2">
                我们也想要居中！<br>
                我们也想要居中！<br>
                我们也想要居中！
        </div>
    	<div class="box3">
            <span>
                我们也想要居中！<br>
                我们也想要居中！<br>
                我们也想要居中！
            </span>
    	</div>
    </body>
    </html>

2. text-align 水平居中

该属性只能对图片、文字等行内元素(display为inline 或 inline-block 等)进行水平居中，对block的块元素不起作用。

3. margin设置auto

水平方向上：

无论是块状元素还是行内元素，都可以通过设置 margin 的 left 和 right 为 auto，来达到水平居中的效果，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。常用的地方，在做居中布局的时候，对于一个div设置 margin：0 auto; 来实现水平居中。

水平垂直方向：

对于一个块级元素，对它做绝对定位，然后设置它的 left right top bottom 都是0， margin 是 auto，来实现水平垂直都居中，对于行内元素，无法设置，因为margin-top 和 margin-bottom 对于行内元素不起作用；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"> 
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		.parent{
			position: absolute;     /* 父级元素设置相对定位 */
			margin-left: 100px;
			margin-top: 100px;
			width: 600px;
			height: 400px; 
			border: 1px solid #ddd;
			border-radius: 15px;
			background-color: #fff;
			box-shadow: 0 3px 18px rgba(0,0,0,.5);
		}
		.child{
			position: absolute;     /* 子级元素设置绝对定位 */
			width: 100px;
			height: 100px;
			background-color: #3eb777;
			border-radius: 15px;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin:auto;    /* 这个属性设置是必须的 */
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child"></div>
	</div>
</body>
</html>

4. vertical-align 设置图片垂直居中(行内元素)

我们先来看一下代码，代码中多设置了一个空的 span 标签，为什么要这样，首先要搞清楚 vertical-align 这个属性的特点，它是相对兄弟级(line-height)来定位的，并且它仅对行内元素有效，所以，在要定位的元素后面多加一个行内元素 span 来撑开父级的行高，以此来居中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		.parent{
			margin-left: 100px;
			margin-top: 100px;
			width: 600px;
			height: 400px; 
			border: 1px solid #ddd;
			border-radius: 15px;
			background-color: #fff;
			box-shadow: 0 3px 18px rgba(0,0,0,.5);
			text-align: center;
		}
		.child{
			width: 0;
			line-height: 400px;
		}
		img{
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="parent">
		<img src="a21.png" alt="">
		<span class="child"></span>
	</div>
</body>
</html>

5. 使用绝对定位来实现居中

该方法只适用于那些已知宽度和高度的元素，并且绝对定位对页面布局没有影响的情况下。

第一步，绝对定位进行居中的原理是通过把这个绝对定位元素的 left 或 top 的属性设置为 50%，这个时候并不是居中的，而是比居中的位置偏移了这个元素宽度或高度的一半距离；

第二步，已知宽高的元素，可以使用一个负的 margin-left 或 margin-top 的值来把它拉回到居中的位置，这个负的 margin 值就是这个元素宽度或高度的一半。

未知宽高的元素，中可以使用 transform:translate(); 这个属性进行设置，这个位移属性是相对于自身进行的，可以传入两个参数，分别是 x 和 y 方向上的偏移量，所以可以传入 (-50%,-50%) 使得元素移动到中心位置实现水平垂直居中。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		.parent{
			position: relative;
			margin-left: 100px;
			margin-top: 100px;
			width: 600px;
			height: 400px; 
			border: 1px solid #ddd;
			border-radius: 15px;
			background-color: #fff;
			box-shadow: 0 3px 18px rgba(0,0,0,.5);
			text-align: center;
		}
		.child{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100px;
			height: 100px;
			background-color: #3eb777;
			border-radius: 15px;
			margin-top: -50px;
			margin-left: -50%;
			/*transform: translate(-50%,-50%); */    /*css3中的新属性*/
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child"></div>
	</div>
</body>
</html>

（张雄同学总结分享的，我就拿来主义了