CSS实现垂直居中的几种实现方式

2024年5月11日发(作者：)

注：此文由断指鹤搜集而来，都在高级浏览器下测试过，但不敢保证IE8以下会不会

出现问题。

页面设计中垂直居中几种实现方式：

垂直居中主要用两种情况，第一种是内外元素的高度全定，这种情况处理起来相对简

单，方法也很多；第二种是外高度定了，但内高度不定，这种情况处理起来相对困难。下

面，便介绍下两种情况下的解决方案。

➢ 内外元素高度全部确定的情况

1、line-height与height值设相同值。

此种方法最简单，但局限性很大，只有单行文本才能够适用。具体示例如下：

 CSS写法：

.vertical{

height: 100px;

line-height:100px;

}

 HTML写法：

此方法优点：适合在所有浏览器，没有足够空间时，内容不会被切掉。

此方法缺点：仅适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效

果极差，差到让你感到恶心。

2、给父容器设置相对定位，然后将本元素也设置为相对定位，top设置成50%，

margin-top设置成：height/2，具体示例如下：

 CSS代码：

.out{

position:relative;

width：400px;

height: 400px;

border: solid 1px gray;

}

. .vertical{