本文总结了在GUI界面设计中实现元素纵向居中的多种方法，包括使用表格法设置元素高度和垂直对齐属性，以及利用CSS提供的display属性将元素视为表格单元。通过示例代码演示了具体应用。
atitit.gui界面纵向居中总结
1.table法...这个简单..
表格设置100%高度,<td align="center" valign="middle">
三、把容器当作表格单元
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
作者 老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com
转载请注明来源： http://blog.youkuaiyun.com/attilax
参考
CSS实现完美垂直居中 - 蓝色理想.htm
CSS实现垂直居中的5种方法 | CSS | 前端观察
1.table法...这个简单..
表格设置100%高度,<td align="center" valign="middle">
三、把容器当作表格单元
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
作者 老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com
转载请注明来源： http://blog.youkuaiyun.com/attilax
参考
CSS实现完美垂直居中 - 蓝色理想.htm
CSS实现垂直居中的5种方法 | CSS | 前端观察
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
