美食
使用CSS简单实现垂直居中
2023-05-02 10:03  浏览:53

  lilian :非常棒的插件!要是能将自定义字段的外链也能转成内链就更好了,很多人需要这个功能啊,等大神加入啊!

  千杯 :真是充满了岁月痕迹的博客啊……是什么让你这一年里变化这么大,简直是质变啊,量的积累肯定也有吧

  千杯 :难得一见做这么久个人博客的人了,膜拜一下,我的域名也快10年了,然而用的时间并不多,相比之下比较惭愧

  我知道这可能并不一定非常有意义,但是很多时候我们往往知其然而不知其所以然,这会使得事情出现惊人的差异。这就是CSS的魅力所在,你可以使用不同的方法实现相同的布局。这样的事情同样也发生在了我的身上,某个礼拜,我发现一个网站使用了一种不同的方法来实现居中布局,而这种方法对我们大家来说早已是都是很熟悉知的简单技术了。的确,可能对于大家很多人来说这种方法早已采用过,但是直到今天它起了我的注意。

  我学到的第一个CSS知识就是如何把一个固定宽度和高度的元素水平或者垂直居中。这些居中的内容可能是入站欢迎页面(SplashPage)中图片,或者是一些设计喜欢的居中设计的网站等。最原始的解决办法就是把元素在窗口中距左和距上边缘进行50%的绝对定位。当然这只是把元素的右上角移动到了窗口的中央,接下来你还需要设置负的margin-left和margin-top并且使它们的值刚好是宽和高的一半来把元素拉加到屏幕的中央。

  为了页面美观起见我给各元素添加了一些背景颜色,这里我们真正感兴趣的是灰色居中部分(此外,你应该注意到为了使背景图片居中你应该设置html、body的高度为100%)。

  如图1所示,这个结果正题我们想要的,元素在水平和垂直方向上都完美地实现了居中。文章中已经提到,对元素绝对定位使其top和left值都为50%,然后使用负的顶部填充和左侧填充并使填充的值为高和宽的一半。

  尽管看起来没有什么问题,但是使用这种方法存在几个严重的不足,水平或者垂直缩小窗口你就会发现这个问题了。当窗口缩小到比元素还要小时,元素就会开始从窗口的上部和左侧滑出。滑出的部分即使是使用窗口的滚动条也无法可见。这就意味着使用较小屏幕的用户根本看不见这些内容。

  文本上部有一半丢失,左侧也有一部分不见了。如果我们进一步缩小窗口,整个文本会完全消失。为了达到我们最初的目的,试着给body增加min-height和min-width属性,但是你会发现这根本没有任何效果,元素依然会滑出窗口之外。

  面对这些问题,一个类似居中技术可以供我们采用,它依然采用了对于顶部的绝对定位,但是对于水平居中使用的是自由浮动。这会限制元素从窗口的左侧滑出。

  为了解决这个问题(也是本文写作的目的)我之前曾经使用过几个比较复杂的方法,但是现在使用的这种方法更简单、更健壮,那就是使用浮动(float)来代替绝对定位。

  页面中设置为顶端50%绝对定位的第一个元素进行浮动。然后把浮动向上拉动,大小为元素高度的一半。

  重要的是我们对浮动元素设置的宽度是100%,并且记住由于某些浏览器会出现问题我们需要对后面的元素设置clear:both。如果我们不使用“float”,元素依然会居中但是它会从顶端消失掉。

  实际上这里涉及到浮动的一个有趣的行为,而且也比较好理解它的原理。为什么当我们使用一个静态元素(或者是第一个示例中绝对定位元素)时内容会从窗口的顶端消失,而当我们使用float时却不会产生这个问题呢?

  浮动的一个特点就是他们脱离了文本流(尽管你可以通过为后面的元素使用clear来重新控制它们)。浮动元素后面的内容会被移动以为浮动元素留空间(通常是通过浏览器对静态顶部填充来清除浮动)。如果浮动元素根本没有出现该位置,那么后面的内容会占居浮动元素原来在页面中的位置。因此对一个浮动元素使用负的顶部填充(margin),浮动元素会冲破任何包含它的块级元素限制,因为我们前面已经提到浮动元素一开始就脱离了文本流。但是如果我们把元素从包含它的块级元素向外拖动足够远以至于它完全超出父元素范围,那么它后面的任何元素将不会继续跟随其向上移动,但是重新设定包含块级元素的内部内容的大小,会使浮动元素继续浮动。

  这就是我们的例子中发生的事情,浮动元素被从body中向上移动,它后面的元素被迫留在body形成的块级元素中。这可能有点难以直接去理解,但是我们可以看一下下面的这个演示。

  上面的代码在页面的顶端设置了一个静态元素,其后是一个浮动元素,再后是其它的静态内容,它就产生了如图5所示的效果,或者可看在线演示。

  和你看到的一样,浮动元素从后面的内容中移走,但是浮动元素后面的内容仍然会停留在包含它的元素的顶端(如在绿色元素的下面)。在我们的前面的例子中,当我们向外移动浮动元素时,也是发生了同样的事情。

  但是如果我们从红色的div去掉float属性,那么红色的div和它后面下面的内容就会被移动到绿色元素的上面。

  我希望这个小的提示会让你感兴趣(即使你已经知道了),这也说明对于我们每一个人都有新的东西要去学习。前面的例子中所有的代码都已经放在了<head>中,方便大家查看。

Tags:seo

以上就是使用CSS简单实现垂直居中的全部内容了,希望大家喜欢。

发表评论
0评