教你如何居中：移动端布局面试题全面考察你的CSS功底

Myth丶恋晨 2022-12-20 06:12 6阅读 0赞

前言  
由于移动互联网的飞速发展，现在基本没有哪个前端说自己只开发 PC 端，移动端什么的我不管。

甚至好多前端主要的工作内容就是开发移动端，因为移动端的内容五花八门：微信小程序、支付宝小程序、京东小程序、快应用、微信公众平台、微信小游戏、混合App、H5等…

打开招聘软件，可以看到目前的岗位对前端的要求是越来越高了，上天入地无所不能，屏幕前的你也可以打开软件看一眼要求，是不是至少都有类似这么几条中的一两个：熟练掌握移动端前端技术、有微信小程序开发经验优先、有混合App开发经验优先，即使不是那种专门做移动端网站的公司，有不少也都写着会移动端优先…

所以移动端的布局就至关重要了，因为无论一个网站的页面背后有着多么复杂的交互逻辑、多庞大的用户量、多么海量的数据、多么高的并发… 它终究还是得有个页面吧！不能让用户一访问网站就直接给人家看数据库吧！

有人的地方就有江湖 有页面的地方就有布局

布局可不仅仅只是把数据整齐的罗列在页面上这么简单，一个合适的布局可以令用户的操作非常顺畅。同时在不同的场景下也应选择不同的布局，如果选错布局的话很可能会导致用户对页面的操作不那么的丝滑，哪怕最初呈现出来的数据都是一样的。

由于移动端的屏幕并不像电脑屏幕那么大，而且长宽比也有很大的区别，所以造就了移动端布局与 PC 端布局有着很大的不同，那么接下来我们就来看一下各式各样的常见布局。

居中布局  
其实居中布局大家在日常生活中基本都见过，只是当时没怎么留意罢了。

没给用户留下深刻印象的布局反而是好布局，因为用户的注意力都在内容上了，证明此时的布局令用户操作顺畅。

而给用户留下印象的布局一般就不太好了（一些与众不同的炫酷布局除外）：

这个按钮怎么放这了，我都误碰好几次了；关闭按钮在哪呢？怎么关啊这个；这个商品的简介在哪呢？应该点哪购买啊？这个布局怎么这么乱看的我都晕了，哎算了算了，以后不来这个网站了……

不同的布局用来对应不同的场景，用对场景的话会令用户的操作比较舒服顺畅，但用错场景的话用户可能会有些懵，不利于引导用户按自己想要的方式去操作。

这种布局是主内容处于页面的正中央位置，常见于登录、注册、提示用户、或点击头像查看大图等场景，通常会添加一层灰色的透明遮罩：

这么做的目的除了突出主题之外，还有一个比较重要的点就是可以令用户感觉到自己并没有离开当前页面，只不过是在当前页面中出现了一个小框而已，这样可以有效减少用户的陌生感。

不仅如此，居中布局还能够有效引导用户进行自己希望用户所进行的操作，用强烈的对比感去引导用户：

利用CSS库实现  
借助市面上已有的 CSS 库，我们可以很轻易的做到居中布局，尤其是可以用到中文关键字，这非常有利于我们的记忆，它就是 chinese-layout。

然后我们再用一个中文渐变色的 CSS 库来美化我们的界面：chinese-gradient。

Document

复制代码 运行结果：

绝对定位实现  
居中布局通常分为两种，一种是固定宽高，另一种是非固定宽高。

固定宽高很好理解，顾名思义就是宽高都写死。而非固定宽高通常都是靠里面的内容来撑起盒子的高度，内容时多时少。

这两种方式也造就了不一样的技术实现，绝对定位法适合固定宽高：

Document

复制代码 运行结果：

如果不给定宽高，盒子将会和父元素一样大，因为绝对定位上下左右都是 0，意为紧贴着父元素的边。  
给了固定宽高，但没写 margin 的话盒子会固定在左上角，因为 top 和 left 的优先级更高。  
给了 margin: auto; 的话，浏览器会自动填充边距，令其居中。  
此种实现方式优点是兼容性很好，几乎没用到任何 CSS 的新特性，全部都是经典属性。  
绝对定位 + 负边距  
此种方法也是适用于固定宽高：

Document

复制代码 运行结果：

⚠️ 注意，"绝对定位+负边距"这种方法不适合那种宽百分之多少、高百分之多少这种相对单位，取而代之的是具体的数值。

因为边距的百分比和宽高的百分比相对的不是同一参考物，它是相对于父元素的宽来计算的，这点要注意。

绝对定位 + 平移  
有时中间盒子的内容是要靠后台传过来的数据决定的，如果写死的话，当数据较多时就会发生溢出，数据较少时又会空出一大片，所以我们需要一种更加智能的方式来实现居中布局。

绝对定位 + 平移 是 绝对定位 + 负边距的改进版，那么具体都改进了哪些方面呢？负边距的百分比并不是相对于自身，而是相对于父元素，所以只能写具体的像素值，显得不够智能。

而平移相对于自身，只需要无脑写 -50% 就可以了:

Document

用内容撑开盒子

复制代码 运行结果：

margin 的百分比是相对于父元素的宽；  
而 translate 函数的百分比是相对于自身；  
不仅适用于未知宽高，也同样适用于固定宽高的居中布局。  
网格 Grid 实现  
大家可能或多或少听过一些 Grid 的大名，深入了解过的人会觉得它很强大，但没深入了解过的人对它的印象可能就是：兼容性不好

但随着时间的推移，在移动端只要不考虑特别低版本的手机的话基本上都可以用了。

即使你对 Grid 没什么兴趣，觉得在移动端用 Flex 就已经足够了的。把它最简单的用法记住了也不会费太大劲。因为毕竟如果你能给面试官写出一个最新的技术，面试官也会对你刮目相看的：

Document

用内容撑开盒子

复制代码 运行结果： 其实关键代码异常的简单，几乎没什么特别大的学习成本，就这么两行：

/\* 令其变成网格布局 \*/  
display: grid;

/\* 令其子元素居中 \*/  
place-items: center;  
复制代码  
Flex 弹性盒子  
移动端布局王者 Flex ：

Document

用内容撑开盒子

复制代码 运行结果： Flex 几乎没有不会的吧？超级好用，简单实惠又便捷，如果这个都不会的话可以去看看阮一峰老师的博客，里面有着很详细的入门教程：

阮一峰博客：www[.][]ruanyifeng.com/blog/2015/0…  
另外，张鑫旭的博客写的也很不错：

张鑫旭博客：www.zhangxinxu.com/wordpress/2…  
表格布局  
在居中布局这种场景下，表格布局也很适用：