21.尚硅谷_css2.1_垂直水平居中.wmv原创

呃，我们来看一下，那这是刚刚稍微跟大家去提了一下啊，怎么去检查一版本也说了一下，其实不是说提升啊，应该是左右。查询啊，说了一下什么是左右查询是不是好，这里面东西如果现在听不懂没关系啊，就是之后慢慢补啊，来我们再来看，好，现在我们要讲一个C3里，呃，那个csi里面比较重要的一个东西。叫12怎么去干嘛，是一个元素干嘛，垂直垂直水平。居中啊，垂直水平居中这个东西啊，之前说是啊，有过这样，有过这样的这样一句话，就是说就是我们啊，已经可以成功的把人送上月球了，是不是啊，可是在CSS里面的话，还是没有一个完美的方案去解决，垂直水平居中啊，说明这个垂直水平居中的话，这个要想找到一个优雅的完美的方案的话，几乎到现在还没有，可是能不能实现能每个方案都有它自的缺点，就是说每个方案都有自己的局限性啊，我们给大家看一下好，如果你想要一个东西水平去做，你会怎么做？

水平居中，我们先来看一下水水平居中怎么装，水平居中是不是比较好装好，我们来看一下水平居中好，比如说有个盒子啊，这个GS这块我就给给他干掉。OK，第二笔好，Test好还是一样0OK，我让这个test。好，Y。嗯，200HAT 200背景等式，但它最终怎么办？Marin上下为零左右呕吐是不是好走你？

好，是不是就居中了，那它垂直方向居中怎么办？是不是都是凹凸啊，是不是就可以了，可不可以啊，不可以吧，好，看一下规范。Marin。好，看一下这这样的一句话。好，什么意思？你如果写马为凹two的话，刘雅琪默认渲染就是马零凹two，你明白吗？他不认你马凹two马in凹就是什嘛，盒子是水平均中的上下平均位置，能明白吗？默认渲染规则就是这样的，OK，那其实我们写这个凹凸其实干嘛跟MARKET0凹凸是一模一样的效果，能明白吗？好，不要纠结为什么，不要问我为什么，我也不知道为什么，那最终它就这么渲染的，就是在浏览器引擎内部，你写马凹two其实就是马给林。上下为零，左右凹凸能明白吗？好，而且我们之前说过了，这个凹凸什么时候会失效。

浮动跟定位的时候是不是OK，那如果想让里面的文字也居中怎么办？怎么办？Text alone等于好走，你好，是不是就过来了？好想让这个文字垂直驱动怎么办？加一个狼海的行高为200PX，那是不是实现了文字的水平就值驱动啊，是不是啊，这个其实比较简单是不是啊？问题是你这个元素怎么垂直水平集中。好，我们来说一下。CTRLCCTRLV，零，二好元素的垂直。水平居中好怎么做好？我外面再给一个盒子，大一点的好，这个给它干掉，外面给一个大一点的盒子，压力好给一个东西叫做外好，里面给一个比较小一点的盒子叫做。

一了，好，OK。来看一下是不是早上那样，是不是啊好怎么玩呢。好，我给这个外还是刚刚的一个尺寸，稍微给它大一点，那这个这个东西就不要了，行高什么都不要了，稍微给大一点，给个400。好，里面我给一个小一点的。好，我给一个外为。100PX为100PX，好给一个背景。为身份好问现在看它们长什么样，是不是长这个样好，我先把这个外面这个大盒子马in上下为零，左右凹凸出去好，然后我想让这个小盒子在我这个，让我在这个大盒子里面垂直水平居中好，什么方案呢？大家来看一下。

好阴呢，你现在是不是有Y跟加克万达怎么办，先让它。定位起来，一旦你定位起来，是不是应该要参照这个外派的定位啊，好，我要让你参照这个外来定位，这就行为。相对定位是不是好，这样的时候的话，你的拼音量是不是基于我这个什么外来的了，好，我让你这个left为。50%问你这个百分比参照于谁的？是不是参照这个400的，汉是不是也参照这个400的？好，我们把这个东西搞定了。构成一个矩形啊，好，Top也成。50%，大家看，那现在问你是不是就过来了，有没有垂直水平居中。没有，是不是还得上去自身的一半？是不是想怎么上去支撑哪一个。怎么上去支持，怎么上去上去从这个方向上去支持一半。

Mainwell。为负50%行不行？想一想行不行？你这个百分比三等于谁的？包含宽的宽度了吧，你能用负50%吗？我要上去自身的一半吧，你现在这样上去的话是干嘛？你看直接飞过来了，因为你上去的是啊，包含块的一半吧，能不能理解啊，所以这边千万不能使用百分比，也就是说你必须得知道这个元素的包含，不然这种方案是不行啊，因为我这边要自己去计算什么，这个marin lab对吧？回复50P X marin。Top也为负50PS吧，这个是由大家看是不是水平垂直居中的。能理解吗？好，可是这个方案的局限性在哪？你必须得知道这个纳的高宽懂不懂，我们有时候有种需求叫什么，未知高宽的元素该如何水平垂直驱动，那我们待会会有方案，懂不懂这个是什么？已知已经知道啊，已知高宽的元素。

如水平居中。好水平居中方案。OK，大家看，那还有一种方案特别厉害，可以来看一下CTRLC也是一样，也是已知高宽的零三。好，来看看我写一下，好，它还是定位，可是我不这么干了，来看我，Left为零，Right。为零，Top为零，Button Bo button为零，有没有见过这么写的，是不是感觉它傻，这四个都四个都定义成零了，好像是不是没有什么作用啊，看一下如果这边马为o two来看。

有没有水平垂直居动，需要你去自己去计算这个宽度嘛，啊，可是你这个高宽是必须得有的，好吧，如果没有这个高宽，比如说我这边有个么，打个比啊。好，如果没有这个高宽来看。嗯，给的谁啊？T，他是身份怎么变得那么大？啊，这个时候你看是不是把整个生本区域都变成什么我外部这个容器的区域了，它有水平垂直居中吗？没有吧，OK，我们来说一下，这是这是为什么，首先来看为什么他能去做。好，我们要说一下绝对定位和模子的一个特性，绝对定位核模子的绝对定位盒子的特性，好，绝对定位盒子特性其实上午我们已经说到过一个了，高宽有。

内容先看好它还有一个什么样的特性呢？好水平方向上。Left加right加。We家candy。Marin等于。包含快Penny。区域的尺寸什么意思？水平方向上的跟你水平方向这个宽度加上这个水平方向的开，加上你水平方向的马等于包含块的什么。

水平方向的拍进去，这个尺寸能不能解，都是水平方向的懂吗？好，再来看垂直方向呢？一模一样。只不过这边改成拓，这个改成。Bo button，好，这个改成hat，这个改成Penny跟market，等于包含为什么Penny区这个次出来，这个是水平方向，这个是垂直方向，向量懂不懂，我们来看一下现在我们这个DEMO，好，我们来问你，现在我这个时候我是不是一呢，是一个定位的盒子，好而且是绝对定位的吧，那多。零是不是多少？0Y有没有为多少？100好有没有？有没有拍，没有拍的默认指挥多。

零马，多马给我马没说。喂。凹凸等于你包含块拍进去的尺寸应该为多少？是不是现在没有拍点，那就是等于啊，是吧？能理解吧，你看前面这几个值有没有定死啊。Marketin是不是变成凹凸啊是不是，那这个时候大家看你这个400要减去100，然后给这个马要分多少。分多少？是不是左右各分各分一百五啊，那么理解来看一下，它是不是左右左右各分了150。左右是不是各分了150，能不能理解啊好，高度上面呢。是不是也是一样的，来看一下高度上面，我们来看现在我这个高度给的是多少，零是多少，零是多少。

啊，六一百吧，别吓我骗你们。零吧，马呢？好，有一件事情在绝对定位里面，你写马为凹，它不会变成marin，上下位定左为凹凸的，明白吧，就是上面也是凹凸，下面也是凹凸，能明白吗？这是绝对定位和姆子的特性，能不懂？刚刚我们说你这个马in写凹凸。Market写凹凸，最终是不是会转化成MARKET0凹凸的？这是什么盒子啊，正常的会计盒子。能理解吗？OK，那盒子不一样，这个特性很不一样的，能明白吗？好，你看这个时候我们说包含块判定区域的尺寸为多少，600，看这个凹凸被平均分配多少。两百五吧，好来看一下这个是你看上下是250，能理解吗？好，这是定位盒子特别有用的一个特性，能明白吗？好，可是我们说刚刚如果这边不写的时候。

是不是这100没有啊？Y跟的默认值为多少？外汉特的分子为多少凹凸吧，想想是不是有两个东西为凹凸了？那你想想，他最终选择的是什么？将所有的尺寸全部给了这个400跟600是不是你看都是000啊，这边是不是也是凹凸啊，这边也是。奥拓，最终他把这个400跟600全部给了谁？给了外斯跟hi吧，说明如果你们俩都是凹T的情况下，谁的优先级比较高啊？外斯跟hi也是浏览器内部的一个逻辑，能明白吗？好，可是如果你刚刚干嘛，这边你如果给了100，这边你也给了100，都已经给了100了是不是？可是你有一件事情你忘掉了，你马o two你没有指定我问你啊，Market能不能走一段零。

好，那现在有东西给你分配吗？来看最终怎么渲染。IPHONE12动都不动。周里来看一下它的和模体，就是100乘100，四周的值都为零，妈给你看有值吗？都没有值能明白吗？为什么？你这边不是定死了吗？全部定死了之后，他还给你分吗？不给你分了能明白吗？好，这是定位和我们子一个特性啊，所以说你要使用决定定位的话干嘛？你必须是首先定位起来，其次四个偏移量全部给我给成零，再其次最重要的马一定得设啊。凹能明白吗？好，这几个东西特别重要，好，这是我们干嘛经常来使用的一个什么。垂直水平居中的一个方案，懂吗？OK，好，再来看好，现在都是是不是都是已知高度元素的水平居中方案，水平垂直居中方案，不是水平居中啊，水平。垂直驱动方案吧，是不是。

好，那我位置高度怎么办？比如CTRLCCTRLV0，四。我位置高度。好，那这些东西我都用不上了，位置告诉怎么办，也就是说你这边有高宽吗？没有好也就是什么，你这个盒子压根就没有高宽，你完全是靠什么内容撑开来的，好走你好来看一下这个时候怎么办。好，刷一下这里，好，我现在是不是想让它垂直水平居动啊，首先你这个定位还是得要的，一旦你为absolute了，问你内种是不是高宽尺寸由内容撑开啊，那这个高度还能百分百吗？是不是高度就不拿百分百了，好，然后你让他居中还是一样，你先让这个left干嘛，你先跑出去50%top也一样，你先跑出去啊，50%是不是统一都下来58%，问题是你怎么回去自身的一半啊，我们说你现在没有高宽这个值，Market left跟monkey回去多少，你能指定吗？

指定不了吧？好，这边先告诉大家，有一个东西叫全泵，里面有一个叫TRANS3D，好，这里面的百分比是参照于元素本身的，什么意思？好，他说这个全全的3D什么意思啊，XX上面往后走，自己的一，自己本身元素的一半，Y轴上面往后走，自己元素本身的一半，Z轴上面不动。懂不懂？好，就这么简单，只不过这个API你是不是还没学到，那之后我们学什么学这个变换的时候我们会学到，只不过暂时已经遇到这个需求了，先拿出来看一下，懂吗？好，看一下它能不能实现。有没有垂直水平聚动好，这是未知高宽元素的垂直水平居中方案懂不懂？可是这个东西的兼容性并不是太好，能明白吗？兼容性去哪看？

Can I。CR，有人给你好，CTRLV上来全是问好看这个兼容性来看，是不是大多数浏览器都需都需要你去带一些前缀的，而且678压根不支持啊，你看上面是不是标着什么黄颜色的都是有问题的懂吗？好看这边是不是也是，你看安卓底下是干嘛？到五跟六的时候才干嘛完全支持啊，你看黑莓底下都是干嘛到现在都不支持啊，能明白，所以说这个全方是有兼容性问题的，能明白吗？好，OK，那这边我们把什么把一个垂直水平最终方案也全部说完。