2024年4月14日发(作者：)
注：此文由断指鹤搜集而来，都在高级浏览器下测试过，但不敢保证IE8以下会不会
出现问题。
页面设计中垂直居中几种实现方式：
垂直居中主要用两种情况，第一种是内外元素的高度全定，这种情况处理起来相对简
单，方法也很多；第二种是外高度定了，但内高度不定，这种情况处理起来相对困难。下
面，便介绍下两种情况下的解决方案。
➢ 内外元素高度全部确定的情况
1、line-height与height值设相同值。
此种方法最简单，但局限性很大，只有单行文本才能够适用。具体示例如下：
CSS写法：
.vertical{
height: 100px;
line-height:100px;
}
HTML写法：
this is a test
此方法优点：适合在所有浏览器，没有足够空间时，内容不会被切掉。
此方法缺点：仅适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效
果极差，差到让你感到恶心。
2、给父容器设置相对定位，然后将本元素也设置为相对定位，top设置成50%，
margin-top设置成：height/2，具体示例如下：
CSS代码：
.out{
position:relative;
width：400px;
height: 400px;
border: solid 1px gray;
}
. .vertical{
发布者：admin，转转请注明出处：http://www.yc00.com/news/1713079373a2178767.html
![[ Linux 命令基础 4 ] Linux 命令详解-文本处理命令](/view/template/justnews/img/lazy-480x300.png)
评论列表（0条）