1. 前言
借助市面上已有的 CSS 库，我们可以很轻易的做到居中布局，尤其是可以用到中文关键字，这非常有利于我们的记忆，它就是 chinese-layout。
然后我们再用一个中文渐变色的 CSS 库来美化我们的界面：chinese-gradient
https://www.yuque.com/vue-sharp/xflqsh/yxn4m7
2. 实例代码
要点就是在 head 标签中用 link 标签引入 chinese-gradient 和 chinese-layout。
然后就可以使用中文关键字啦：
实例演示:
<!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>
运行结果：
3. 小结
用 CSS 库是不是很简单阿?
但是我们不仅要学会 CSS 库的用法，虽然好,还要学会在不依赖外部条件的情况下, 但是最好不用css库,来看一下纯手写的原生写法
绝对定位实现居中布局
1.前言
居中布局通常分为两种，一种是固定宽高，另一种是非固定宽高。
固定宽高很好理解，非固定宽高通常都是靠里面的内容来撑起盒子的高度，内容时多时少。
这两种方式也造就了不一样的技术实现，我们来看一下。
2. 实例代码
假如我们有一个宽度占 70%，高度占 25% 的盒子，我们可以这么写：
实例演示:
<!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; 的话，浏览器会自动填充边距，令其居中。
- 此种实现方式
-
3. 小结
-
学会了绝对定位来进行居中之后，下一小节我们再来看一下绝对定位怎么和外边距进行搭配。
优点是兼容性很好，几乎没用到任何 CSS 的新特性，全部都是经典属性。
绝对定位+负边距实现居中布局
1. 前言
上一小节我们讲了利用绝对定位来进行居中布局。本小节继续讲另外一种方法实现居中布局。
但注意，本小节的"绝对定位+负边距"这种方法不适合绝对定位法那种宽百分之多少、高百分之多少这种相对单位，取而代之的是具体的数值。
2. 实例代码
比如，这个例子我们设置居中的盒子宽度为 300px、高度为 200px：
实例演示:
<!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>运行结果如下:
3. 小结
top: 50%;和left: 50%;会让盒子的左上角定位到中央位置；- 所以给上外边距和左外边距一个负值将盒子拉到中央位置；
- margin 的百分比并不是相对于自身，而是相对于父元素的宽度，所以这里不能写成
-50%； - 此种实现方式兼容性也同样十分良好。
绝对定位+平移实现居中布局
1. 前言
有时中间盒子的内容是要靠后台传过来的数据决定的，如果写死的话，当数据较多时就会发生溢出，数据较少时又会空出一大片，所以我们需要一种更加智能的方式来实现居中布局。
绝对定位 + 平移 是 绝对定位 + 负边距的改进版，那么具体都改进了哪些方面呢？
负边距的百分比并不是相对于自身，而是相对于父元素，所以只能写具体的像素值，显得不够智能。
而平移相对于自身，只需要无脑写 -50% 就可以了。
2. 实例代码
来看如何用绝对定位+平移来实现居中布局：
<!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>运行结果：
3. 小结
- margin 的百分比是相对于父元素的宽；
- translate 函数的百分比是相对于自身；
-
不仅适用于未知宽高，也同样适用于固定宽高的居中布局。
3. 小结
- margin 的百分比是相对于父元素的宽；
- translate 函数的百分比是相对于自身；
- 不仅适用于未知宽高，也同样适用于固定宽高的居中布局。
网格布局实现居中布局
1. 前言
本小节，我们将采用网格布局来实现居中布局的样式。
网格其实就是最近比较火的 Grid 布局，原理就是把父元素分割成一个个的小格子。
然后子元素指定自己具体在那个格子上，有点类似于表格布局。
2. 实例代码
通过网格布局实现移动端居中布局。
实例演示:
<!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>结果如下:
估计大多数人都不太熟悉这个网格布局，它有些类似于表格布局，但比表格布局更加强大。
如果同学们对Grid不是很熟悉可以参考 CSS3 Grid 布局http://www.didiok.com/wiki/css3lesson/girdinfo.html。
还有很多人担心 Grid 的兼容性：
其实可以看到绝大部分浏览器都已经支持了，即使是最被吐槽的 IE 浏览器，也可以通过增加 -ms-前缀来进行支持。
例如：display: -ms-grid;
3. 小结
Grid 布局是近些年来逐渐兴起的一种布局方式，它的功能十分强大。
用它可以轻松的实现响应式布局，以前要很多行代码很多行判断的复杂布局，在掌握了 Grid 之后也都不在话下
弹性布局实现居中布局
1. 前言
弹性布局 已经成为移动端最流行的布局方式之一了，本小节我们将会使用弹性布局的方式来实现我们的居中布局。
2. 实例代码
实例演示:
<!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>运行结果：
3. 小结
如果对弹性盒子不太了解的直接记住这俩要点即可：
- 父元素：
display: flex; - 子元素：
margin: auto;
下一小节我们来讲一讲表格布局，顺便为了降低大家的学习成本，为大家推荐一个需要重点练会的布局，其他布局作为了解即可。
表格布局实现居中布局
1. 前言
其实 CSS 布局流行起来之前一直使用的是表格布局。
在居中布局这种场景下，表格布局也很适用。
2. 实例代码
来看看表格具体如何实现居中：
实例演示:
<!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;。
3. 小结
我知道看到这里很多同学都郁闷了：一个居中布局就这么多种方式，我得学到猴年马月才能记得住啊…
其实大可不必，方案过多虽然会导致有些懵，但如果我就为你指明一个方案呢？
重点练会一个方案，其他方案作为了解即可，这样是不是就感觉不那么困难了呢？
那么最推荐的就是最流行的同时也是代码量最少的：弹性布局方案。只要不是一些需要兼容很低版本浏览器的网站，你只需重点练会这一种就可以了。但如果你找了个非要兼容低版本浏览器的工作，那么推荐你绝对定位法。
本章我们带领大家用多种方式实现了居中布局，当然不仅仅只有这几种方式能够实现居中，但是这几种是目前来说最实用的。
其他没提到方式有的比较偏门，实际开发中很少用到。
目录
扫一扫
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
