zoukankan      html  css  js  c++  java
  • CSS未知div高度垂直居中代码_层和布局特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
    <title>CSS未知高度垂直居中</title>
    <style type="text/css">
    html,
    body
    {
    height: 100%;
    padding:0;
    margin:0;
    }

    body
    {
    min-height: 200px;
    text-align: center;
    min- 402px
    }

    .FirstDIV
    {
    margin-top: -100px; /* SecondDIV高度的一半 */
    float: left;
    100%;
    height: 50%;
    }

    .SecondDIV
    {
    clear: both;
    border: silver 1px solid;
    background: #CCCCCC;
    margin-left: auto;
    overflow: auto;
    400px;
    margin-right: auto;
    height: 200px;
    text-align: left
    }
    </style>
    </head>
    <body>
    <div class="FirstDIV"></div>
    <div class="SecondDIV">
    <p>晕噢,难道没有居中吗?</p>
    <p>我是模板无忧(<a href="/jscss/">mb5u.com</a>)提供各类编程源码、视频教程、JavaScript/CSS特效代码以及常用软件下载等。<br>看我是不是垂直居中了?</p>
    </div>
    </body>
    </html>

    以上方式测试了下 ,发觉兼容性还不错

    还有一种实现方式,是通过onresize 。onresize事件会在窗口或框架被调整大小时发生。

    在事件里面计算出要居中的内容的top,left值,设置css.

  • 相关阅读:
    Substrate 为区块链创新而来
    跨链资产原子转移工具包 Decred atomicswap
    我的友情链接
    我的友情链接
    我的友情链接
    我的友情链接
    我的友情链接
    我的友情链接
    我的友情链接
    我的友情链接
  • 原文地址:https://www.cnblogs.com/LL-723/p/3613801.html
Copyright © 2011-2022 走看看