垂直中心实现方法
摘要:
当我们做页面时,我们经常满足垂直居中的需要。今天我们有5种垂直对齐方式。每种方法都有自己的优缺点,可以选择自己喜欢的方式。下面的代码是我亲自测试过的。
线高度:
复制代码代码如下所示:
{。内容
身高:240px;
行高:240px;
}
垂直对齐:中间;
之前:
复制代码代码如下所示:
{。内容
身高:240px;
}
{子:之前
内容;
显示块;
身高:120px;
}
垂直对齐:中间;
垫上:
复制代码代码如下所示:
{。内容
身高:240px;
}
{。孩子
120px垫上;
}
垂直对齐:中间;
位置:绝对:
复制代码代码如下所示:
{。内容
位置:绝对;
身高:240px;
}
{。孩子
职位:相对;
顶部:50%;
}
垂直对齐:中间;
显示:表单元格;
复制代码代码如下所示:
{ #内容
显示:表;
}
{ #孩子
显示:表单元格;
垂直对齐:中间;
身高:300px;
}
垂直对齐:中间;
总结:
以上我做的代码在Chrome测试下,IE可能有一些问题,请注意使用。