共计 6474 个字符，预计需要花费 17 分钟才能阅读完成。
前言
因为挪动互联网的飞速发展，当初根本没有哪个前端说本人只开发 PC 端，挪动端什么的我不论。
甚至好多前端次要的工作内容就是开发挪动端，因为挪动端的内容形形色色：微信小程序、支付宝小程序、京东小程序、快利用、微信公众平台、微信小游戏、混合 App、H5 等…
关上招聘软件，能够看到目前的岗位对前端的要求是越来越高了，上天入地无所不能，屏幕前的你也能够关上软件看一眼要求，是不是至多都有相似这么几条中的一两个：熟练掌握挪动端前端技术、有微信小程序开发教训优先、有混合 App 开发教训优先，即便不是那种专门做挪动端网站的公司，有不少也都写着会挪动端优先…
所以挪动端的布局就至关重要了，因为无论一个网站的页面背地有着如许简单的交互逻辑、多宏大的用户量、如许海量的数据、如许高的并发…
它究竟还是得有个页面吧！不能让用户一拜访网站就间接给人家看数据库吧！
有人的中央就有江湖 有页面的中央就有布局
布局可不仅仅只是把数据参差的列举在页面上这么简略，一个适合的布局能够令用户的操作十分顺畅。同时在不同的场景下也应抉择不同的布局，如果选错布局的话很可能会导致用户对页面的操作不那么的丝滑，哪怕最后出现进去的数据都是一样的。
因为挪动端的屏幕并不像电脑屏幕那么大，而且长宽比也有很大的区别，所以造就了挪动端布局与 PC 端布局有着很大的不同，那么接下来咱们就来看一下各式各样的常见布局。
居中布局
其实居中布局大家在日常生活中根本都见过，只是过后没怎么注意罢了。
没给用户留下深刻印象的布局反而是好布局，因为用户的注意力都在内容上了，证实此时的布局令用户操作顺畅。
而给用户留下印象的布局个别就不太好了（一些不同凡响的炫酷布局除外）：
这个按钮怎么放这了，我都误碰好几次了；敞开按钮在哪呢？怎么关啊这个；这个商品的简介在哪呢？应该点哪购买啊？这个布局怎么这么乱看的我都晕了，哎算了算了，当前不来这个网站了……
不同的布局用来对应不同的场景，用对场景的话会令用户的操作比拟难受顺畅，但用错场景的话用户可能会有些懵，不利于疏导用户按本人想要的形式去操作。
这种布局是主内容处于页面的正地方地位，常见于登录、注册、提醒用户、或点击头像查看大图等场景，通常会增加一层灰色的通明遮罩：
这么做的目标除了突出主题之外，还有一个比拟重要的点就是能够令用户感觉到本人并没有来到以后页面，只不过是在以后页面中呈现了一个小框而已，这样能够无效缩小用户的陌生感。
不仅如此，居中布局还可能无效疏导用户进行本人心愿用户所进行的操作，用强烈的比照感去疏导用户：
利用 CSS 库实现
借助市面上已有的 CSS 库，咱们能够很轻易的做到居中布局，尤其是能够用到中文关键字，这十分有利于咱们的记忆，它就是 chinese-layout。
而后咱们再用一个中文渐变色的 CSS 库来丑化咱们的界面：chinese-gradient。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在这里用 link 标签引入中文布局 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">
<!-- 在这里用 link 标签引入中文渐变色 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
<style>
/* 革除默认款式 */
* {padding: 0; margin: 0;}
/* 令 html 和 body 全屏显示 */
html, body {height: 100%;}
body {
/* 先在父元素上设置 grid 布局 */
display: grid;
grid: var(-- 居中);
/* 给个难看的渐变色 */
background: var(-- 霾灰);
}
.center {
/* 指定子元素在核心地位 */
grid-area: 中;
/* 给子元素设置宽高，不然宽高为 0 导致什么也看不见 */
width: 150px;
height: 150px;
/* 给一个难看的背景色 */
background: var(-- 胭脂粉);
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>运行后果：
相对定位实现
居中布局通常分为两种，一种是固定宽高，另一种是非固定宽高。
固定宽高很好了解，顾名思义就是宽高都写死。
而非固定宽高通常都是靠里面的内容来撑起盒子的高度，内容时多时少。
这两种形式也造就了不一样的技术实现，相对定位法适宜固定宽高：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 革除默认款式 */
* {padding: 0; margin: 0;}
/* 令 html 和 body 全屏显示, 并有一个灰色背景 */
html, body {height: 100%; background: gray;}
/* 先在父元素上设置绝对定位 */
body {position: relative}
.center {
/* 相对定位 */
position: absolute;
/* 上下左右全副为 0 */
top: 0;
right: 0;
bottom: 0;
left: 0;
/* 给定宽高 */
width: 70%;
height: 25%;
/* 令外边距主动填充 */
margin: auto;
/* 红色背景 */
background: white;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>运行后果：
- 如果不给定宽高，盒子将会和父元素一样大，因为相对定位上下左右都是 0，意为紧贴着父元素的边。
- 给了固定宽高，但没写 margin 的话盒子会固定在左上角，因为 top 和 left 的优先级更高。
- 给了 margin: auto; 的话，浏览器会主动填充边距，令其居中。
- 此种实现形式长处是兼容性很好，简直没用到任何 CSS 的新个性，全部都是经典属性。
相对定位 + 负边距
此种办法也是实用于固定宽高：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 革除默认款式 */
* {padding: 0; margin: 0;}
/* 令 html 和 body 全屏显示, 并有一个灰色背景 */
html, body {height: 100%; background: gray;}
/* 先在父元素上设置绝对定位 */
body {position: relative}
.center {
/* 相对定位 */
position: absolute;
/* 上方和左方为 50% */
top: 50%;
left: 50%;
/* 给定宽高 */
width: 300px;
height: 200px;
/* 上外边距为负的给定高度的一半 */
margin-top: -100px;
/* 左外边距为负的给定宽度的一半 */
margin-left: -150px;
/* 红色背景 */
background: white;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>运行后果：
⚠️ 留神，” 相对定位 + 负边距 ” 这种办法不适宜那种宽百分之多少、高百分之多少这种绝对单位，取而代之的是具体的数值。
因为边距的百分比和宽高的百分比绝对的不是同一参考物，它是绝对于父元素的宽来计算的，这点要留神。
相对定位 + 平移
有时两头盒子的内容是要靠后盾传过来的数据决定的，如果写死的话，当数据较多时就会产生溢出，数据较少时又会空出一大片，所以咱们须要一种更加智能的形式来实现居中布局。
相对定位 + 平移 是 相对定位 + 负边距 的改进版，那么具体都改良了哪些方面呢？
负边距的百分比并不是绝对于本身，而是绝对于父元素，所以只能写具体的像素值，显得不够智能。
而平移绝对于本身，只须要无脑写 -50% 就能够了:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 革除默认款式 */
* {padding: 0; margin: 0;}
/* 令 html 和 body 全屏显示, 并有一个灰色背景 */
html, body {height: 100%; background: gray;}
/* 先在父元素上设置绝对定位 */
body {position: relative}
.center {
/* 相对定位 */
position: absolute;
/* 上方和左方为 50% */
top: 50%;
left: 50%;
/* 不必给宽高，然而能够给个内边距避免内容与盒子过于贴合 */
padding: 10px;
/* 这个 50% 是绝对于本身宽高而言的 */
transform: translate(-50%, -50%);
/* 红色背景 */
background: white;
}
</style>
</head>
<body>
<div class="center">
用内容撑开盒子
</div>
</body>
</html>运行后果：
- margin 的百分比是绝对于父元素的宽；
- 而
translate函数的百分比是绝对于本身； - 不仅实用于未知宽高，也同样实用于固定宽高的居中布局。
网格 Grid 实现
大家可能或多或少听过一些 Grid 的小名，深刻理解过的人会感觉它很弱小，但没深刻理解过的人对它的印象可能就是：兼容性不好
但随着工夫的推移，在挪动端只有不思考特地低版本的手机的话基本上都能够用了。
即便你对 Grid 没什么趣味，感觉在挪动端用 Flex 就曾经足够了的。把它最简略的用法记住了也不会费太大劲。因为毕竟如果你能给面试官写出一个最新的技术，面试官也会对你另眼相看的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 革除默认款式 */
* {padding: 0; margin: 0;}
/* 令 html 和 body 全屏显示, 并有一个灰色背景 */
html, body {height: 100%; background: gray;}
/* 地方盒子的间接父元素 */
body {
/* 令其变成网格布局 */
display: grid;
/* 令其子元素居中 */
place-items: center;
}
.center {
/* 不必给宽高，然而能够给个内边距避免内容与盒子过于贴合 */
padding: 10px;
/* 红色背景 */
background: white;
}
</style>
</head>
<body>
<div class="center"> 用内容撑开盒子 </div>
</body>
</html>运行后果：
其实要害代码异样的简略，简直没什么特地大的学习老本，就这么两行：
/* 令其变成网格布局 */
display: grid;
/* 令其子元素居中 */
place-items: center;Flex 弹性盒子
挪动端布局王者 Flex：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 革除默认款式 */
* {padding: 0; margin: 0;}
/* 令 html 和 body 全屏显示, 并有一个灰色背景 */
html, body {height: 100%; background: gray;}
/* 找到地方盒子的间接父元素 */
body {
/* 令其变成弹性布局 */
display: flex;
}
.center {
/* 主动外边距 */
margin: auto;
/* 红色背景 */
background: white;
/* 不必给宽高，然而能够给个内边距避免内容与盒子过于贴合 */
padding: 10px;
}
</style>
</head>
<body>
<div class="center"> 用内容撑开盒子 </div>
</body>
</html>运行后果：
Flex 简直没有不会的吧？超级好用，简略实惠又便捷，如果这个都不会的话能够去看看阮一峰老师的博客，外面有着很具体的入门教程：
- 阮一峰博客：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
另外，张鑫旭的博客写的也很不错：
- 张鑫旭博客：https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/
表格布局
在居中布局这种场景下，表格布局也很实用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 革除默认款式 */
* {padding: 0; margin: 0;}
body {
/* 令 body 全屏显示 */
width: 100vw;
height: 100vh;
/* 显示为表格的格子 */
display: table-cell;
/* 程度居中 */
text-align: center;
/* 垂直居中 */
vertical-align: middle;
/* 灰色背景 */
background: gray;
}
.center {
/* 显示为行内块元素 */
display: inline-block;
/* 不必给宽高，然而能够给个内边距避免内容与盒子过于贴合 */
padding: 10px;
/* 红色背景 */
background: white;
}
</style>
</head>
<body>
<div class="center"> 用内容撑开盒子 </div>
</body>
</html>运行后果：
此布局的关键点在于：
-
父元素上 3 个款式设置：
display: table-cell;text-align: center;vertical-align: center;
-
子元素上设置：
display: inline-block;
结语
看完这些有没有很郁闷，一个小小的居中布局都这么多种实现形式，而且这还不是全副的实现形式，我只挑了几款市面上常见的，可能大家会感觉有这个必要记这么多嘛！
其实这个问题就显得仁者见仁智者见智了，一方面 面试造火箭，工作拧螺丝 的现状让大家很苦恼。明明感觉本人技术还不错，至多公司要的都能给实现进去，但面试的时候面对面试官的刁难本人却无能为力。
兴许下一次面试时并不会遇到一个面试官让你以各种形式实现居中布局，但开辟一下眼界总是好的，因为变换一下思路有助于大家在遇见简单布局的时候能够疾速选型。
该文章首发于
前端学不动公众号
对了，这篇文章是连载模式的，居中布局仅仅只是一个开始，点赞 + 关注 咱们下个布局见！