垂直中心实现方法

本文介绍了用CSS实现垂直居中的5种方法,虽然各有优缺点,但也很实用。合作伙伴根据自己的项目自由选择。





摘要:
当我们做页面时,我们经常满足垂直居中的需要。今天我们有5种垂直对齐方式。每种方法都有自己的优缺点,可以选择自己喜欢的方式。下面的代码是我亲自测试过的。

线高度:


复制代码代码如下所示:

{。内容
身高:240px;
行高:240px;
}


垂直对齐:中间;



之前:


复制代码代码如下所示:

{。内容
身高:240px;
}
{子:之前
内容;
显示块;
身高:120px;
}



垂直对齐:中间;



垫上:


复制代码代码如下所示:

{。内容
身高:240px;
}
{。孩子
120px垫上;
}



垂直对齐:中间;




位置:绝对:


复制代码代码如下所示:

{。内容
位置:绝对;
身高:240px;
}
{。孩子
职位:相对;
顶部:50%;
}



垂直对齐:中间;




显示:表单元格;


复制代码代码如下所示:

{ #内容
显示:表;
}
{ #孩子
显示:表单元格;
垂直对齐:中间;
身高:300px;
}



垂直对齐:中间;




总结:
以上我做的代码在Chrome测试下,IE可能有一些问题,请注意使用。