CSS窗口垂直水平居中

发布时间:2020-05-23 02:24:17发布者:admin浏览数:

本章节分享一段代码,它实现了窗口的垂直水平居中效果。

在这里没有考虑低版本浏览器的兼容问题,其实在不久的将来也不用考虑。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">* { margin: 0; padding: 0;}body { height: 1000px;}section { position: fixed; left: 0; top: 0; width: 100%; width: 100vw; height: 100%; height: 100vh; background: #000; text-align: center; line-height: 100vh; opacity: 0.6;}section > p { display: inline-block; width: 500px; height: 300px; background: blue; vertical-align: middle;}</style></head><body><section> <p></p></section></body></html>

  网站建设分类
程序开发 |  系统教程 |  软件应用 |  图形图像 |  网络应用 |  站长教程 |  网站建设 |  视频教程 |  硬件维护 |  IT资讯 |  中国it动力网
本站发布的系统与软件仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件!
如侵犯到您的权益,请及时通知我们,我们会及时处理。
Copyright @ 2019 中国it动力网 网站导航