多种方式实现居中

大约 2 分钟约 723 字...

「实现居中」也是一道必考题
参考代码：

<style>
	.wp {
		border: 1px solid red;
		width: 300px;
		height: 300px;
	}

	.box {
		background: green;
	}

	.box.fixed-size {
		width: 100px;
		height: 100px;
	}
</style>
<body>
	<div class="wp">
		<div class="box fixed-size">text</div>
	</div>
</body>

如图：如何让绿色的块水平垂直居中呢？

仅适用于居中元素定宽高

absolute - 负 margin
- 绝对定位的百分比是相对于父元素的宽高
- 使得元素偏移后，在修正元素自身宽高的一半即可

.wp {
	position: relative;
}
.box {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
}

absolute - margin auto
- 这种方式将设置各个方向的距离都是 0，此时配合 margin 为 auto，就可以在各个方向上居中了

.wp {
	position: relative;
}
.box {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

absolute - calc
- 此种方法和第一种类似，不再展开

.root {
	position: relative;
}
.textBox {
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
}

居中元素不定宽高

对于居中元素不定宽高的情况，依然也有很多方法：

<style>
  .wp {
  border: 1px solid red;
  width: 300px;
  height: 300px;
}

.box {
  background: green;
}
</style>
<div class="wp">
  <div class="box">text</div>
</div>

absolute - transform
- 不定宽高时，利用 CSS3 新增的 transform，transform 的 translate 属性也可以设置百分比，这个百分比是相对于自身的宽和高，因此可以将 translate 设置为 ﹣50%：
- 原理和第一种方法也类似

.wp {
	position: relative;
}
.box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

lineheight
- 把 box 设置为行内元素，通过 text-align 也可以做到水平居中，同时通过 vertical-align 做到垂直方向上的居中，代码如下：
- 这个方法充分利用了行内 / 块级元素的特点

.wp {
	line-height: 300px;
	text-align: center;
	font-size: 0px;
}
.box {
	font-size: 16px;
	display: inline-block;
	vertical-align: middle;
	line-height: initial;
	text-align: left; /* 修正文字 */
}

table
- 其实历史上 table 经常被用来做页面布局，这么做的缺点是会增加很多冗余代码，并且性能也不友好

.wp {
	text-align: center;
}
.box {
	display: inline-block;
}

css-table
- 如何使用 table 布局的特性效果，但是不采用 table 元素呢？
- 答案是 css-table：
- 使用了 display: table-cell，同时和 table 布局相比，减少了很多冗余代码

.wp {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.box {
	display: inline-block;
}

flex
- flex 是非常现代的布局方案，只需几行代码就可以优雅地做到居中：

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

grid
- grid 布局非常超前，虽然兼容性不好，但是能力超强：

.wp {
	display: grid;
}
.box {
	align-self: center;
	justify-self: center;
}

总结一下：
- PC 端有兼容性要求，宽高固定，推荐 absolute - 负 margin
- PC 端有兼容要求，宽高不固定，推荐 css-table
- PC 端无兼容性要求，推荐 flex
- 移动端推荐使用 flex
最后整理一个列表：

昵称

邮箱

网址

按正序
按倒序
按热度

多种方式实现居中

仅适用于居中元素定宽高

居中元素不定宽高

预览: