26.尚硅谷_css2.1_垂直居中.wmv原创

好，前段里面有个东西叫我克，有没有听过我克来看一下。好，就是这个东西，这个属性有没有见过，应该有见过，是不是好，这个属性它有什么作用，好先我们直观的来看一个东西。好，那这个属性可能是我们要去涉及到，要多讲一会儿一个属性啊。好叫。大家是不是今天我们写垂直居中的时候特别麻烦，是不是OK，这个属性是用来控制什么呢？零八就是它是用来专门用来控制什么垂直居中的，可是这个属性记着它只对阴兰洛元素有效啊，OK。垂直居中的一个属性，好来看一下，好，我写一个什么样的DEMO呢？嗯，好，我把这里面的东西。把之前写航空的东西我贴过来的嘛。

好，CTRLCTRLC。Ctrl a ctrl v，好。好周你呃来看一下，现在我是不是只有嗯，大家看看啊，怎么改。好，我这样吧，Div的话还是给一个背景颜色，马的话还是给个60这个span的话，这个方的三为是不是为30啊，行高是为一啊，这个行高我调成。40POK。白的话改成pink吧，OK，那我们多来几个好，来个五份，来个五分之后的话，放下都是30行高统一调什么五十六十，七十八十，好，我一旦一旦调整了这个行高，是不是行高它也会变，是不是来看一下这个时候长它长成什么样，是不是就长成这个样，因为你是不是都是30的一个大小啊，诶这个航高怎么没有把航宽给撑开来。

来看一下这是不是我们的一个。一个div，这生成的是不是我们div啊，四十五十，我们看每个的一个行高是多少，看下它的行高为多少。80PX行高是不是80PX。可是感觉有点奇怪啊。好，现在这个行框是多高啊。就是88是不是我们给的最认的是我们给的最最大的这个，比如说我把这个给做了，那应该是78。那看是不是变成70啊，好，没有问题吧，是不是通过我们这个航高把这个什么通过这个这叫什么航高，把这个行高给撑开来了，是不是好，可是我们记记不得我们说过一件事情啊，我把这个放的size也改改吧，改成40，改成50 60 70 OK。

好，呃，有点多了。那就要两三个吧，好，周一。好，嗯，这个行高稍微给大一点，给升80好，这里。好，是不是就撑开来了，因为你方的size为五十十个的话，其实你整个内容区是比较大的吧，就是最好让你的行高要比这个内容去干嘛，要大一点吧，这你能写写最高写什么1.5吧，不要给什么给值了，是不是好统一调成1.5。挑出原来的1.5倍看一下。好，这个时候其实我们说是不是认的是最高的这个什么。哎，有没有记过记到之前一句话，我们来说好，我们说这句话是不是之前没有没有让我们讲行高的时候，让你什么忽略掉了吧？OK，我们说一行上面垂直对齐时，以行高值最大的行列框为基准，其他行列框采用自己的对齐方式向基准对齐，最终计算航空航空的高度，什么意思啊？说一行上只要你垂直对齐时，也就在我们在说这个模这个属性的时候干嘛？我们说一行上面是不是可能会有多个元素啊，那这个行框怎么去确定啊，是不是找里面行列框最高的那一个，然后你们是不是之间要有个对齐关系的，对齐关系找哪个为参照物啊？

是不是行高最大那个行内框作为一个参照啊，说待会你们去对齐的时候，是不是就按着它来对齐的。能理解吗？好看比如说什么我让这两个东西干么？What，就是来调整它的什么对齐的一种什么形式的，能明白吗？它的值有什么有什么，这个我们待会来说有没有我们来看一下，好现在我们说如果干嘛。

我让这个SPA好，就让这第一个SPA，我让你的，我来。Middle来看一下。好刷一下好自己看是不是它的中线就是对准对到它什么对到来看一下，先看我们拓吧，这个密度好像不是很好看啊，好看这个错吧，错是不是往上走。好的。好，Top是不是往上走，你看现在我们这个航框两边是不是有有些间隙的，是平均分别上去的啊，好看如果为top的时候，我来为top的时候，看water托时候，元素及其后代的顶端与整行的顶端对齐吧，想想现在它的我过来是不是top法，好，我们说这个是不是我们的航框。最外层的这个其实是我们的行框吧，那是不是我们说它是不是它的行内框。

这是不是它的一个行列框，是不是，然后两边放的什么啊，其实行列框在哪边，呃，这个怎么去算，来看一下规范上面怎么去说的。好，一行上垂直对齐时，以行高值最大的行内框作为基准吧，其他行框，其他行列框采用自己的对齐方式向基准对齐方，那现在这个整个升本的区域是不是通过我们这么这个行列框给撑开来的，是不是，那我现在把这个框是不是调整了，我我格来维托法是不是他直接干嘛顶上去了，只不过是不是把这个分配出来，这个间隙给嘛给留了下来啊，能不理解啊，那再来如果干嘛，我把它的我体回来调成什么。波，那是不是应该下来，你看是不是什么到到底下来对齐啊，能理解吗？其实他看到是谁是谁在对齐啊。嗯，是不是有点类似于是它的行列框能理解吗？是完全超成完全按照它的行行列框在对齐吗？

并不是吧，这样这是不是它的一个整个。大家看这是不是我最大的一个行列框，不，这是它的一个什么，应该叫内容区吧。是不是啊，OK，大家看那这个是不是它这个行列框。是不是，然后我一行上面的黄框，是不是就去拿这个行框呢。它的高值是不是根据这个什么航天框来指定的啊，然后我们说待会你这个东西如果调整它的垂直居中属性的话，是不是都是参照于这个航天框来的，能理解吗？如果是拓把就什么其实跑到它什么跟它的内容去去什么最奇吧，能理解吗？我看你们再来看一下，如果是拓把。其实就是跟它的什么内容去在对齐，如果是波特呢。波跟它的什么在对齐，是不是底部的这个内容区这个变化在对齐，没准呢，是不是跟这个中线在。

刷一下。Ni Le是不是跟这个中线再对齐啊，好像我们把这个航高再称的大一点，称成原来的两倍，称成原来的三倍吧，好，这里，那这个航框是不是又要变大了？好，你看中线对齐是不是，是不是就就在这一块啊，好来看如果刚刚这个波好往哪走，是不是贴到最下面了，能不理解就是上中下嘛，可以理解吗？只不过他参照的是谁啊？是你撑开来的那个航行框吗？能理解吗？OK，那这个东西它有什么运用呢？单独你们看这个几个SPA的话，是没有什么运用的，那我们最大的运用在哪呢？大家可以来看一下。好，我们经常有个需求叫使图片。好使，图片垂直水平居中，好走你零六。好，我们来说一个叫什么十图片垂直水平居中，好，这个东西怎么做好，我去拿张图片。

Ctrl c OK，我来在行高里面贴一张图片，好，你们就二吧，是不是好，我们干嘛来一个元素走你好这一边我什么都不写。呃，叫一个ID叫。好，OK，走，你来一个style标签好行，来一个marin 0penny也给它清掉为零，好，我给这个外，我给这个外来一个高度好hat，呃，为400PX好，宽度也要给一个400PX，好，我来个边框1PX实心的好，黑色吧好，走你在这块吧，让它居中马in上下为零，左右凹凸，走，你居中过来好，居中过来之后，里面我们来塞一张image。

好，Src什么？你们二好放进来是不是太大了？好让它这个尺寸变小一点。好图片它有一个特点，高宽自适应什么意思？我把它的宽度调成一百五之后，它的高度也会随之，干嘛自己去做个实验能明白吗？好，我们说之前说了，如果让一个元素垂直水平居中，方案是不是已经告诉我大家了，是不是让一张图片垂直水平居中，有更优雅的方案来看一下，好这个方案怎么去写？首先图片是不是相当于是个赖的课程，说好让它的text alone等于center，那是不是就水平居中了，是不是？然后你想让它垂直居中怎么办？来一个whatgo alive？不是不是，他是干嘛这张image吧，好，We底下的这张什么image，让他的what go来，为什么？

Middle斗看行不行，行不行不行，因为是不是现在这个框里面只有你一个元素啊，它是没有办法对齐的，它跟你，你说你一个人对齐啊，你跟谁对齐啊，是不是你干嘛你就你哪怕设备随便你设什么值都是干嘛不会动的，你说干嘛top。是不是他也在这块啊，它是不会动的，懂不懂你一个人对齐，你有任何意思吗？没有，那怎么办？好来看一下给这个wi。添加一个阿桂元素来一个很正常，好把它的高度调成百分百，OK，那这个高度百分是不是就拿着这个外部的百分百是不然后呢。呃，先给他一个颜，先给他什么小小的，给个宽度吧，给个2PX，给个背景颜色，看一下pink，看这个元素有没有出来。有没有出来没有要设置他的为。

In，兰卡，好，走你。好，是不是就出来了，是不是，然后怎么办呢？好是不是现在这边有一个元素可以跟它来对齐了，而且我们说如果你一行上面是不是你必须要生成一这个才能干嘛排在一行，如果你在一行上面有多个行内元素的话干嘛。你如果调整这个working体赖这个蜗体LAN的基准是谁啊？是航框最高的那个吧，现在他们两个元素行框最高的是谁啊？是不是粉红色的这个这个块啊，它高度比较高嘛，那它的航空是不是就比较高，那怎么办呢？好把它的我体格来设置出来。我设置成。Middle好OK，然后呢，把这个宽度给我干掉，相当于好像没有这个元素是不是啊，好，这个时候你让这个image我过来，喂，现在是不是他们俩就有参照了，好，你看。

能不能居中？好，这是图片垂直水平居中的一个方案，懂不懂怎么做的，在这个容器里面给他创造一个称满行的一个。元素懂不懂，让他们俩的对齐方式按照它来对齐，把它们俩的对齐方式都是按照什么？水平方向对齐，那这个元素就什么垂直最重要，那这种方式只能适用于image这种的line block元素，能明白吗？千万不要给div这么去用，用不了的，浮动元素，绝对定位元素都是不可以的，Input它也是可以的，懂不懂像input image这种元素，一般我们叫它替换元素，什么叫替换元素？你想想image跟input你在页面上面去写的时候，是不是只写了一个标签啊？可是最终渲染到页面上去的时候，要么是文本框，要么是是是不是，是不是有图片的，是不是拿图片跟文本框把这个元素的位置给占占据掉了，是不是需要你去默认指定勾宽了？

你如果不指定高宽，我问你它有没有高宽，有你图片是什么高宽，我就什么高宽呢，能理解吗？这种元素一般我们叫它。占位人数能明白吗？OK，那讲到这一块，我们把文本上面最重最什么重要的几个运用给说了好，文本上面到这一块，其他东西你都可以不管，两样东西你必须得知道，第一个你通过行高，行高怎么让单行文本垂直居中，你通过你通过垂直居中属性，怎么让一张图片在一个容器里面垂直水平居中，懂不懂这两件事情你必须得知道，能明白吗？就是你哪怕不懂其中的原理，你这个套路给我背一要给我背下来明明白吧，因为开发当中经常会去使用懂不懂，那其实原理我们已经讲了，就是在这个容器里面给它加了一个什么行内框，比它高的一个元素，让对齐方式根据这个行列框来。进行对齐，能明白吗？还有件事情其实我们这边已经说过了。

好，我们来看，那这边这些值，你们可以自己来测一测懂不懂，好他说其实我们最终看这边我们在做行高的时候。呃，其实浏览器在实现的时候的话，这个。你看这个这叫什么线，这叫底线跟底线吧，好，底线跟底线我问你啊。它是不是就是我这个内容区的头部跟底部啊，能明白吗？跟我这个行高撑出来这个行列框有关系吗。没有关系啊，认清楚这四条线都是在内容区里面的。OK啊，所以说刚刚我们在这边对齐的时候，大家看。刚刚我们在这边。嗯，我写在哪了。怎么没有了？哎，我刚刚我记得我写了个单的。

OK。