CSS制作水平垂直居中对齐多种方式各有千秋

2024-07-11 08:28:23

字体：大中小

来源：转载

供稿：网友

作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不同的方式制作垂直居中方法，但每种方法各有千秋呀，要正确的选择也是一件不容易的事情。我会将这几种方法一一介绍给大家，以供大家参考。或许对于我这样的初学者有一定的帮助。

用CSS来实现元素的垂直居中效果是件苦差事，虽然说实现方法有多种，但有很多方式在某些浏览器下可能无法正常的工作。接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处。

方法一：

这种方法用来实现单行垂直居中是相当的简单的，你只要保证元素内容是单行，并且其高度是固定不变的，你只要将其“line-height”设置成和“height”值一样就Ok了。不过这种方法局限性太大，只有单行文本的元素才适用，所以在多行元素中是不能使用这种方法的。
Html Markup

复制代码

代码如下:
<div class="vertical">content</div>

CSS Code:

复制代码

代码如下:
.vertical {
height: 100px;
line-height: 100px;/*值等于元素高度的值*/
}

优点：

适合在所有浏览器，没有足够空间时，内容不会被切掉

缺点：

仅适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。

这种方法对运用在小元素上是非常有用的，比如说让一个button、图片或者单行文本字段。

方法二：

这种方法将在需要给容器设置绝对定位（position:absolute）,并且定位高度（top:50%）和margin-top为高度的一半（margin-top:-height/2）。这就意味着使用这种方法来实现垂直居中的效果，那么元素必须要有一个固定的高度。这样一来，你给元素设置了固定高度，如果你又给他设置了“overflow:auto”，那么当元素内容超过容器后，这样元素的就会出现滚动，而不会自适应内容的高度。

HTML Markup

复制代码

代码如下:
<div class="vertical">content</div>

CSS Code

复制代码

代码如下:
.vertical {
height: 100px;/*元素的高度*/
position: absolute;
top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/
margin-top: -50px;/*设置元素顶边负边距，大小为元素高度的一半*/
}

优点：

能在各浏览器下工作，结构简单明了，不需增加额外的标签

上一篇：Google浏览器CSS居中兼容问题完美解决方法

下一篇：CSS实现段落首行缩进两个字符不再使用空格