zoukankan      html  css  js  c++  java
  • div垂直居中

    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
       * { margin:0; padding:0; list-style:none; font-size:14px;}/*---该css reset仅用于demo,请自行换成适合您自己的css reset---*/
       html { height:100%;}
       body { height:100%; text-align:center;}
       .centerDiv { display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:center; width:200px; padding:10px; border:1px solid #f60; background:#fc0;}
       .hiddenDiv { height:100%; overflow:hidden; display:inline-block; width:1px; overflow:hidden; margin-left:-1px; zoom:1; *display:inline; *margin-top:-1px; _margin-top:0; vertical-align:middle;}
      </style>
     </head>
     <body>
    <div class="centerDiv">
       垂直居中,左右居中<br/>
       垂直居中,左右居中<br/>
       垂直居中,左右居中<br/>
       垂直居中,左右居中<br/>
       垂直居中,左右居中<br/>
       垂直居中,左右居中<br/>
       垂直居中,左右居中<br/>
       垂直居中,左右居中<br/>
       垂直居中,左右居中<br/>
       垂直居中,左右居中<br/>
       垂直居中,左右居中<br/>
       垂直居中,左右居中<br/>
      </div><div class="hiddenDiv"></div>
     </body>
    </html>
  • 相关阅读:
    Travis 编译使用 JDK 的版本
    《程序员的职业素养》读书笔记
    先做人,在做事
    CAP理论
    ZGC实践
    虚拟化技术的分类及介绍
    C# AD域验证登录
    dotnet core 3.1 站点发布成windows服务
    windows 服务无法调用office word COM接口
    Ext 动态加载js文件
  • 原文地址:https://www.cnblogs.com/sprinng/p/4998536.html
Copyright © 2011-2022 走看看