微信小程序开发中的垂直居中实战教程

程序开发中的垂直居中实战教程。

一、垂直居中

(系统笔记之) 父元素高度确定的【单行】文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的;

line-height: 顾名思义，行高(行间距)，指在文本中，行与行之间的 基线间的距离 )。

line-height 与 font-size 的计算值之差，在CSS中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

最后效果见下边的第一条　1.行高+高度：line-height：Npx(N = 与元素高度相同的值);

(系统笔记之) 父元素高度确定的【多行】文本

父元素高度确定的多行文本、图片等的竖直居中的方法有两种：

方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：

html代码：

1

2

3

4

看我是否可以居中。p>

5p>

6 tr>table>

7body>

css代码：

1 table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

方法二：设置块级元素的 display 为 table-cell(设置为表格单元显示)

但这种方法兼容性比较差，只是提供大家学习参考。

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示)，激活 vertical-align 属性，

但注意 IE6、7 并不支持这个样式, 兼容性比较差。

html

1

2

3

看我是否可以居中。p>

4

看我是否可以居中。p>

5

看我是否可以居中。p>

6p>

7p>

css

1

这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。

2017-04-25 17:53:04

————————————————————————————————————————————————————————————————————————————————————————————————————

其他三点我自己总结的方法如下：(其中第一条也是父元素高度确定的单行文本的处理方法)

1.行高+高度：line-height：Npx(N = 与元素高度相同的值);

正如N的值那样，这种解决方法就是要盒模型是有高度设置的。举例：

.box {

width: 45px;

height: 60px;

line-height: 60px;

}

高度是60px，行高也设置为60px，这样，就可以实现垂直居中的问题。

如图：影视二字就可以垂直居中了。

可行性分析：就像图片中看到的那样，只有两个字，他们排在一行不会换行，一旦换行的话，行高就会应用于文字，由于行高过大的原因，会导致剩下的文字跑出画面了。

如右图：

2：【父元素高度确定】定位+外边距：position：absolute;top：50%;margin-top: -Bpx;(B是元素的高度/2的值)

这里就不一定需要盒模型的固定高度了，只需要物体的高度，比如字体。至于怎么获得字体的高度，就去浏览器的调试工具(Dreamweaver也可以也有这个功能，实时编辑的工具都是可以的。)中看。当不设置高度值得时候，将鼠标移到对应的标签上，自然会有宽高显示出来。

喏：

这么一看高度就是19px;

所以设置的话：

.box{

position: absolute;

top: 50%;

margin-top: -10px;

}

可行性分析：绝对定位absolute是一个魔鬼，不到万不得已不能碰他。

那么怎么既避免absolute的绝对定位使用，又要实现想要的布局呢?

3：【父元素高度确定】外边距+高度：margin-top：50%-Mpx;(M是元素的高度/2的值)

不知道这种写法，以前也没有见过。但是正如开篇说的那样，我从来没这么想过可以这么玩css，所以很多次我既想要设置width是100%，又要刨除掉padding、border等的值。你就不知道应该是百分几了!当然我后来是用box-sizing解决了，让padding'等算进了总width中，但有时候涉及到响应式的话，还是很麻烦的要弄好多个@media来限制，动辄上30了，那是多么的土且笨的解决啊。直到那么一天，我接受了老师的偶然实验的想法，让我眼前一亮，那就是让css做加减法!

说到让css自己做加减法，我以前记得看一本书(or文章吧!who care)是有讲过css可以做加减法，但我竟然没想到，让他做不同单位值得加减法!老师也是一脸兴奋的跟我讲，我也不知道可以这样，那天就是试了试，没想到成功了。哈哈，是啊，伟大而又神奇的css，总是给我们惊喜。这就是我爱它的原因吧。

但我想，直接让css做加减法既然是可以的，何必还调用这个看上去就像个js函数一样的东东呢?毕竟他不是兼容性的。

css直接做加减法的方法虽然直白且低级，但是我们没有后遗症啊!(我只是随便说说，毕竟我没有测试过!不负责任奥!!!233333)

废话说了这么多，就是一个核心理念，不管什么单位和数值了，那么头疼的响应式运算，就交给我们的css自动运算吧。

额(⊙o⊙)…貌似变换成了水平的问题解决。

好，那接下来就是水平：

——————————————————————————————————————————————————

二、水平居中(系统笔记见最后边)

1：【内联元素】文本居中：text-align：center(不解释)

可行性分析：一个盒子内部的文字、元素(有固定宽度)的居中问题他是可以解决的。

那么条件不够呢?

没条件就要创造条件嘛!没有wrap就包一个嘛!没有宽度就定下来嘛!别矫情。问题总是可以解决的。

2：【定宽块元素】自动水平外边距：margin：0 auto;(更加不想解释)

0：垂直方向margin可变值，表示margin-top、margin-bottom两个的值，如果设置的话，二者一样。如果不想二者一样，可以在auto后再设置一个：margin: Apx auto Bpx;

auto:水平方向margin，auto就是自动，也算是让css自动计算距离左右的位置吧，

可行性分析：必须要元素定宽，即要设置宽度值。

3：【需要定宽】绝对定位+外边距：position：absolute;left：50%;margin-left: -Bpx;(B是元素的宽度/2的值)(更加不想解释)

有个盒模型，他有自己的宽度高度、又是绝对定位。这种情况，想让他水平居中的话用text-align与margin：0 auto;的方法都是不可取的。毕竟absolute已经飞起来了，脱离了文档流，任何限制都对他没有作用了。但是，好处是不管他以前什么属性，用了absolute之后就可以设置宽高。所以就有了解决办法。

.box{

position: absolute;

top: -15px;

left: 50%;

width: 30px;

height: 30px;