CSS实现元素居中N种方法 ——比较全，附上 demo

不是阿怪的阿怪
553 阅读4分钟

文章适合「前端新人」和「巩固基础的前端切图仔」，整理得比较全，建议收藏。

这阵子在准备面试，复习一些基础知识，发现元素居中的实现方式特别多，网上那些整理的也比较乱，就准备自己动手整理一下。影响元素居中的因素很多，不同元素类型、是否设置宽高、不同实现方式「常规的，position、flex」、不同居中类型「水平、垂直、水平垂直」各种组合加起来起码有十几种。不同的实现方式浏览器兼容也有差异。所以好好整理一下还是很有必要的。

测试环境：浏览器：chrome 91.0.4472.124 兼容性不同浏览器会存在差异，兼容性后面有时间补上

文章的demo，已经发送到 github，需要预览效果的可以拉一下代码 ——— 「元素居中的N种方法」！ 觉得还不错，记得点个赞喔

水平居中

text-align: center

适用：行内元素

<style>
	.inline-box{	
            height: 300px;
            width: 300px;
            border: 1px solid black;
            text-align: center; //关键代码
	}
</style>
	
<div class="inline-box">
    <!-- 行内元素 -->
    <span>行内元素水平居中</span>
    <!-- 行内块级元素 -->
    <img src="logo.jpg">
</div>

margin: 0 auto

适用：块级元素，已设置宽高

<style>

.block-box {
	float: left;
	height: 300px;
	width: 300px;
	border: 1px solid black;
}
/* 已设置宽度 */
.block-content-1 {
	width: 100px;
	height: 100px;
	background-color: cadetblue;
	margin: 0 auto; //关键代码
}
/* 没设置宽度 ，默认占满一行，没有水平居中意义*/
.block-content-2 {
	background: #fba6a6;
}
</style>
 		
<div class="block-box">
	<div class="block-content-1">设置宽度，水平居中</div>
	<div class="block-content-2">没设宽度默认占满一行，没必要水平居中</div>
</div>

margin-left

适用: 块级元素，已知高度

人工计算居中的位置，父元素宽为 300px ，子元素宽 100px , 那么 margin-left 设置为 50 px 即可。

display: table-cell + text-algin: center

适用：行内元素

.table-cell-box {
    height: 300px;
    width: 300px;
    border: 1px solid black;
    display: table-cell;
    text-align: center;
}
<div class="table-cell-box">
	<span>table-cell 设置宽度，水平居中</span>
</div>

position + left: 0 + right: 0 + margin: auto

适用：行内和块级元素都适用，需要设置宽度

.position-margin-box {
	position: relative;
}

.position-margin-box * {
	position: absolute;
	width: 200px;
	background-color: cadetblue;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0.5;
}

<div class="position-margin-box">
	<span class="inline-content">行内元素</span>
	<div class="block-content">块级元素</div>
</div>

position + left + transform

适用：行内和块级元素都适用，是否设置宽高都适应

<style>

.position-box {
	position: relative;
	float: left;
	height: 300px;
	width: 300px;
	border: 1px solid black;
}
// 行内元素
.position-span {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
//块级元素
.position-div {
	position: absolute;
	/* 不设置宽高定位的方式也可以实现水平居中 */
	width: 100px;
	height: 100px;
	background-color: cadetblue; 
	top: 50px
	left: 50%; //关键代码
	transform: translateX(-50%); 
}
</style>

<!-- 定位方式实现水平居中 -->
<div class="position-box">
	<span class="position-span">行内元素定位方式实现水平居中</span>
	<div class="position-div">块级元素定位方式实现水平居中</div>
</div>

flex 布局水平居中

适用 : 行内和块级元素，是否设置宽高都适用

/* flex 布局显示水平居中 (是否设置宽高以及元素类型，不会影响居中效果) */
.flex-box {
	display: flex;
	justify-content: center;
}

.flex-div {
	width: 100px;
	height: 100px;
	background-color: cadetblue;
}
<!-- 定位方式实现水平居中 -->
<div class="flex-box">
	<!-- 行内元素 -->
	<!-- <span class="flex-span">flex 布局实现水平居中</span> -->
	<!-- 块级元素 -->
	<div class="flex-div">flex 布局实现水平居中 </div>
</div>

垂直居中

line-height

适用: 行内元素和绝大部分行内块级元素（img 元素不生效）

.inline-box{
    height: 300px;
    width: 300px;
    border: 1px solid black;
    line-height: 300px;
}

<div class="inline-box">
	<!-- 行内元素 -->
	<span>行内元素垂直居中</span>
        
        <!-- 行内块元素 -->
	<!-- <input type="text">
	<textarea>textarea</textarea>
	<label>label</label>
	<select>select</select> -->
        
        <!-- img 不生效 -->
        <!--<img src="logo.jpg"> -->
</div>

display: table-cell + vertical-align: middle

适用: 行内元素和块级元素

与水平居中类型，text-algin:center 换成了 vertical-algin:middle ，还有就是它支持垂直居中 块级元素

.inline-block-box{
    display: table-cell; 
    vertical-align: middle;
    height: 300px;
    width: 300px;
    border: 1px solid black;
}
<div class="inline-block-box">
	<div>行内元素垂直居中</div>
	<!-- img 也生效 -->
	<img src="logo.jpg">
        <!-- <span>行内元素</span> -->
</div>

margin-top

适用: 块级元素，已知高度

人工计算居中的位置，父元素高为 300px ，子元素 100px , 那么 margin-top 设置为 50 px 即可，没什么特别就不贴代码了。

position + top: 0 + bottom: 0 + margin: auto

适用：行内和块级元素都适用，需要设置宽度

.position-margin-box {
	position: relative;
}

.position-margin-box * {
	position: absolute;
	height: 100px;
	background-color: cadetblue;
	top: 0;
	bottom: 0;
	margin: auto;
	opacity: 0.5;
}

<div class="position-margin-box">
	<span class="inline-content">行内元素</span>
	<div class="block-content">块级元素</div>
</div>

position + top + transfrom

适用：行内元素和块级元素

与上面水平居中的实现原理一致，只是方向换了一下。 position + left：50% + transfrom:transaleX(-50%) 变成了 `position + top：50% + transfrom:transaleY(-50%)

相关代码参考「水平居中」或者查看 demo

flex 布局实现垂直居中

适用：行内元素和块级元素

与上面水平居中的实现原理一致，justify-content: center 换成 align-items: center

相关代码参考「水平居中 flex 布局的实现」或者查看 demo

垂直水平居中

其实就是水平和垂直居中的组合而已。

table-cell + text-algin: center + vertical-align: middle

适用：行内元素

.table-cell-box {
        height: 300px;
	width: 300px;
	border: 1px solid black;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
<div class="table-cell-box">
	<span class="inline-content">行内元素</span>
	<div class="block-content">块级元素无法水平居中</div>
</div>

position + margin

适用：行内和块级元素，需要设置宽高

.position-margin-box {
	position: relative;
}

.position-margin-box * {
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: cadetblue;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	opacity: 0.5;
}

<div class="position-margin-box">
	<span class="inline-content">行内元素</span>
	<div class="block-content">块级元素</div>
</div>

position + transform

适用：行内和块级元素，是否设置宽高都适用

.position-box {
position: relative;
	height: 300px;
	width: 300px;
	border: 1px solid black;
}
<div class="position-box">
    <span class="position-span">行内元素 </span>
    <div class="position-div">块级元素</div>
</div>
        
.position-box * {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.position-div {
	width: 100px;
	height: 100px;
	background-color: cadetblue;
}

flex 布局

适用：行内和块级元素，是否设置宽高都适用

.flex-box {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-div {
	width: 100px;
	height: 100px;
	background-color: cadetblue;
}
<div class="flex-box">
    <div class="flex-div">flex 布局 </div>
</div>
avatar
文章
阅读
粉丝