时间戳

首页 > 技术文章 > CSS 元素居中方式总结

CSS 元素居中方式总结

wmbuke 2020-09-18 22:29 原文

作者:WangMin
格言:努力做好自己喜欢的每一件事

在开发过程中，很多网页需求要求我们居中一个div，比如html文档流当中的一块div，比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式，接下来就分享下一下几种常用的居中方式。

1、margin:0 auto 水平居中

也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。前提：已设置width值。

HTML:

<div class="box"></div>

CSS:

.box{
	width:500px;
	height:100px;
	background:#f00;
	margin:0 auto;
}

在这里插入图片描述

注意：这种对齐方式要求居中元素是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。

2、text-align:center 方式

这种方式可以水平居中块级元素中的行内元素，如inline，inline-block；

<div class="box">
	<span>text-algin:center</span>
</div>

.box{
	width:500px;
	height:100px;
	background:#f00;
	text-align: center;
}
.center_text{
	display:inline-block;
	width:500px
}

在这里插入图片描述
但是如果用来居中块级元素中的块级元素时，如div中的div，当内层的div有自己的宽度，这种方法就会失效。只能让里面div的文字等内容居中，而div仍然是左对齐的。

在这里插入图片描述

一般的图片居中都是和text-align一样，将图片包装在一个div中，将该div的text-align设为center即可。

<div class="box">
	<img src="img/5d8eb50e70116.png" width="200px" height="150px"/>
</div>

.box{
	width:300px;
	background:#f00;
	text-align: center;
}

在这里插入图片描述

3、position:absolute方式水平垂直居 (脱离文档流的居中方式)

1）absolute + 负margin（已知宽高 ）
使用绝对定位和负外边距对块级元素进行垂直居中，利用 position:absolute 搭配top，left 50%，再将 margin 设为负值也可以对div进行水平垂直居中。margin中的值为该div宽度、高度的一半。

<div class="box">
	<div>position: absolute;
	left:50%;
	top:50%;
	margin:-100px 0 0 -100px;</div>
</div>

.box{
	width:300px;
	height:300px;
	background:#f00;
	position: relative;
}
.box>div{
	width:200px;
	height:200px;
	position: absolute;
	left:50%;
	top:50%;
	margin:-100px 0 0 -100px;
	background:palegoldenrod;
}

在这里插入图片描述
我们可以总结成一个公式：
left:50%； margin-left:负的宽度的一半；top:50%； margin-top:负的高度的一半；

以上CSS代码可以简化，但居中效果一样：使用css3计算的方式居中元素calc，代码如下：

.box>div{
	width:200px;
	height:200px;
	position: absolute;
	top: calc(50% - 100px);
    left: calc(50% - 100px);
	background:palegoldenrod;
}

以上代码的计算原理跟我总结的公式原理是一致的，其优点是简化代码，提高网页的执行效率。

2）absolute + transform（未知宽高）
这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。但是当我们不知道被居中块级元素的尺寸的时候该怎么办呢？解决方式如下：

.box>div{
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	background:palegoldenrod;
}

在这里插入图片描述
这种方法非常明显的好处就是不需要知道被居中的元素的尺寸，因为transform中偏移的百分比就是相对于元素自身的尺寸来说的，当被居中的元素是被自己内部元素撑开宽或者高的时候可适用此方法。
3）absolute + margin auto

<div class="box">	
	<div>absolute + margin auto</div>
</div>

.box{
	width:400px;
	height:300px;
	background:#DEB887;
	position: relative;
}
.box>div{
	width:200px;
	height:200px;
	display: inline-block;
	position: absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom: 0px;
	margin:auto;
	background:palevioletred;
}

在这里插入图片描述

4、padding 填充方式

利用 padding 和 background-clip 配合实现 div 的水平垂直居中，通过 backgroun-clip 设置为 content-box ，将背景裁剪到内容区外沿，再利用 padding 设为外div减去内div的差的一半，来实现：

<div class="box">
	<div>padding: 75px;
	background-clip:content-box;
	</div>
</div>

.box{
	width:300px;
	background:#f00;
}
.box>div{
	width:150px;
	height:150px;
	padding: 75px;
	background:palegoldenrod;
	background-clip:content-box; /*居中的关键*/
}

在这里插入图片描述
这种方式看似没有什么技术含量，但其实在某种场景下也是非常好用的。

5、display:table-cell（未知宽高）

给父元素设置 display:table，可以通过 display: table-cell 将要对居中的子元素模拟成一个表格单元格 td， 配合 width，text-align:center，vertical-align:middle 让大小不固定元素垂直居中，float、absolute 等属性都会影响它的实现，不影响margin属性。

<div class="box">
	<div class="center_text">让大小不固定元素垂直居中</div>
</div>

.box{
	display: table;
	width:400px;
	height:200px;
	background:#f00;
}
.box>.center_text{
	display: table-cell;
	background:blanchedalmond;
	text-align:center;
	vertical-align: middle;
}

在这里插入图片描述

6、display:flex 居中

元素可以通过设置 display:flex; 将其指定为flex布局的容器，指定好了容器之后再为其添加 align-items 属性和 justify-content 属性，其中 align-items 属性属性定义项目在交叉轴（这里是纵向周）上的对齐方式，可能的取值有五种，分别如下：
flex-start:交叉轴的起点对齐；flex-end:交叉轴的终点对齐；
center：交叉轴的中点对齐；baseline项目第一行文字的基线对齐；
strech(该值是默认值)：如果项目没有设置高度或者设置为auto，那么将占满整个容器的高度。

<div class="box">	
	<div class="center_text">display: flex;</div>
</div>

.box{
	width:400px;
	height:200px;
	background:#f00;
	display: flex;
	align-items: center; /*垂直居中*/
	justify-content: center;/*水平居中*/
}
.box>.center_text{
	width:200px;
	height:100px;
	background:blanchedalmond;
}

在这里插入图片描述
这种方式最为简便，就是兼容性不好，不过随着时间的前进，各大浏览器一定会都兼容的。

7、line-height 行高方式

行内元素的垂直居中把height和line-height的值设置成一样的即可。

<div class="box">	
	<span>line-height: 100px;</span>
</div>

.box{
	width:200px;
	height:100px;
	line-height: 100px;/*行高与高度一致*/
	text-align: center;
	background:#f00;
}

在这里插入图片描述

8、css3的fit-content

“fit-content”是CSS中给“width”属性新加的一个属性值，他配合margin可以轻松的实现水平居中的效果，但是浏览器兼容性差，不推荐使用。

<div class="box">	
	<div>width: fit-content;</div>
</div>

.box{
	width: fit-content;
	margin: 0 auto;
	background:#ccc;
}

9、利用vertical-align:middle（未知宽高）

这个方法关键要有一个和容器一样高的元素作为居中的一个参照就像b元素一样，而且还要结合 display:inline-block。这方法不常见，所以不推荐使用。

<div class="box">	
	<b class="vamb"></b>
	<div class="test">利用vertical-align:middle</div>
</div>

.box{
	width:300px;
	height:300px; 
	background:rgba(0,0,0,0.5);
	text-align:center;
	font-size:0;
}
.vamb{
	display:inline-block; 
	width:0px;
	height:100%;
	vertical-align:middle;
}
 .test{
 	display:inline-block;
	vertical-align:middle;
	font-size:16px;
	text-align:left;
	background:red;
 }

在这里插入图片描述
以上是我目前所能理解的元素居中方式，后面如果有新的方式会补充的。

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!!

推荐阅读