网页元素居中的n种方法

Posted 2020-12-13 cnroadbridge

导语：元素居中对齐在很多场景看上去很和谐很漂亮。除此之外，对于前端开发面试者的基础也是很好的一个考察点。下面跟着作者的思路，一起来看下吧。

场景分析

• 一个元素，它有可能有背景，那我要它的背景居中对齐
• 一个元素，它还有可能有个父级元素，那我要它居中于其父级元素
• 一个元素，它也有可能还带有一些子内容，我要让它的子内容居中

场景建模

根据场景分析提出的一些假设，我们试着去建立对应的模型，下面是分别根据上面的三个场景设计的相关模型。

• 搞父子元素居中对齐

• 搞元素背景居中对齐

• 搞元素内容居中对齐

场景实现

相关说明

为了统一，这里我们定义一个400*400px的带着黑色边框粉红色身体的类名为.box的父容器，它有可能会有一个200*200px的带着原谅色身体的类名为.box-son的子容器。这里为了效果能够直观且明显，笔者故意把背景图片的原始大小处理成小于宿主像素的大小。好吧，我们开始吧！

背景居中

我们做这样一件事，在一个div容器中，我们通过background-image属性引入一张背景，之后我们期望这张引入的背景呢，它能够水平垂直居中于宿主元素。

这里介绍两个属性background-repeat和background-position，如果你初中英语好的话，我想你也应该知道了，这里字面意思就是这个属性的意思。一个是设置背景图片怎么铺宿主元素（默认时铺满的）更美丽的，另一个是设置背景图片相对于宿主元素的的位置，你可以传像素、百分比、相关方向单词（top、bottom、left、right）给它。当其为百分比的时候，它的计算公式如下：

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

简言之，就是宿主元素的宽高减去图片宽高乘以相关百分比就是相对于宿主元素左上角那个原点的位置。

在背景图片不重复的情况下，你想让一张图片居中于宿主元素的方法，可以有background-postion: center center、background-postion: 50%, 50%,也可以简写成background-postion: center或者background-postion: 50%

所以，在楼上这些前提下，我们大致能够归出一个类，形如：

/** 这里以复杂写法的百分比为例， 分别代表距离宿主元素左上角的x和y轴的距离**/
.box-son {
	background-repeat: no-repeat;
	background-position: 50%, 50%;
}

文字内容居中

如果宿主元素的内容是文字之类的，我们期望它能够居中于宿主元素，这里用到两个属性，一个是text-align，一个是line-height。text-algin:center可以使内容水平居中于宿主元素，将line-height设置成宿主元素相同的高度，便可让宿主元素垂直居中。

相关例子链接：https://ataola.github.io/show/zj/center-middle.html#example11

子元素居中于父元素

相关说明

这里解释下，父相子绝，这个是我阉割了“父级元素相对定位，子级元素绝对定位”这句话浓缩后的叫法。后面出现这个概念我就不过多再进行重复介绍了。

父相子绝 + margin: auto

父元素相对定位子元素绝对定位后，设置其top、right、bottom、left都为0，之后我们将其的margin设置为auto。这样子的话，父级元素与子级元素他们之间空出来的部分都会被这个margin均匀撑开。

.box-position {
    position: relative;
}

.box-example1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

相关例子链接：https://ataola.github.io/show/zj/center-middle.html#example1

父相子绝 + 负值margin

父元素相对定位子元素绝对定位后，子元素设置top: 50%; left:50%;，这里的百分比参考值是相对于父元素的宽高，参考的点是父元素的左上角和子元素的左上角，所以我们需要矫正一下，减去子元素宽高的一半。这件事可以让子元素的margin代劳。

.box-position {
    position: relative;
}

.box-example2 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

相关例子链接： https://ataola.github.io/show/zj/center-middle.html#example2

父相子绝 + 平移（translate）

在楼上那个例子的基础上，为了矫正子元素的偏移，我们其实还可以用css的平移属性。这个平移的百分比是相对于其本身的宽高的，所以是向反方向50%。

.box-position {
    position: relative;
}

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

相关例子链接：https://ataola.github.io/show/zj/center-middle.html#example3

父子double相（不推荐，做着玩玩的）

一个不成熟的做法哈，父子都是相对定位也还是可以勉强居中的，硬算嘛，这里没有太大价值就不展开了。

.box-position {
    position: relative;
}

.box-example4 {
    position: relative;
    top: 90px;
    left: 90px;
}

相关例子链接：https://ataola.github.io/show/zj/center-middle.html#example4

父子double相 + rem（不推荐，同楼上）

没有太大价值，略过。

相关例子链接: https://ataola.github.io/show/zj/center-middle.html#example5

父相子绝 + calc

calc这个css属性可以允许在声明css属性值时执行一些计算，回到我们之前的那个矫正偏移量的模型上，那么这里很容易想到子元素top、left属性设置成50%减去子元素一半的这样一个模型。

.box-position {
	position: relative;
}
.box-example6 {
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}

相关例子链接：https://ataola.github.io/show/zj/center-middle.html#example6

新旧flex

flex布局，但凡一个正经点的初面都会遇到的，因为它好用也很常用，这里介绍两种，一种是新版的flex布局的写法，一种是旧版的flex布局的写法

flex布局你就把它看成是一条轴线，一条长得还挺夯实的轴线，在这条轴线上，我们想要放一个盒子，有很多种放法，具体的可以搜下阮一峰老师的教程这里不再赘述。一个化繁为简的想法哈，这个是跟琦瑞哥学到的，就是我们很多时候也不一定能记得住那么多属性，我们期望做这样一件事，就是把它化抽象为形象。我们可以用具体的方位去表达我们的想法，简言之就是封装成一个类库，然后用一些接地气的类名去控制flex布局。

有兴趣的童鞋可以看下我实现的一个低配版的css样式库：https://ataola.github.io/show/box/assets/taolaui/flex.css

新版flex的写法

在不改变轴方向的情况下，其父元素设置align-items: center;表示垂直居中，justify-content: center;表示水平居中。

父元素设置：

.flex {
    display: flex;
}

.flex-middle {
    align-items: center;
}

.flex-center {
    justify-content: center;
}

相关例子链接：https://ataola.github.io/show/zj/center-middle.html#example7

旧版flex的写法

这里就是提及一下有这么种存在，读者用新版的写法就好。

.box-old {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}

相关例子链接：https://ataola.github.io/show/zj/center-middle.html#example8

table布局

父元素设置display: table,子元素设置display:table-cell，在只有一个子元素的情况下它会尽可能撑满父元素，多个子元素的情况下水平均分。设置vertical-align: middle可以使得其内容垂直居中。

.box-table {
	display: table;
}

.box-son-table {
    display: table-cell;
    vertical-align: middle;
}

相关例子链接：https://ataola.github.io/show/zj/center-middle.html#example9

grid布局

前面我们提到的flex布局时轴布局是一维的，这里的grid网格布局时二维的是平面的。将其父元素设置成display：grid，然后子元素设置align-self: center;表示垂直居中，justify-self: center;表示水平居中。

.box-grid {
	display: grid;
}

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

相关例子链接：https://ataola.github.io/show/zj/center-middle.html#example10

最后

相关实现地址已开源：https://ataola.github.io/show/zj/center-middle.html，若有不足之处，供批评指正！

其他网页设计基础总结：https://ataola.github.io/show/

参考文献

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-repeat

https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。