zoukankan      html  css  js  c++  java
  • 任意长宽度子div在任意长宽度父div垂直水平居中

    <DocType html>
    <html>
        <head>
            <title>任意长宽度高度垂直水平居中div</title>
            <style>
                .parentDiv{
                    500px;<!-- 长宽可以改变-->
                    height:500px;
                    margin:0 auto;
                    background:blue;            
                }
                .childDiv{
                    200px;<!-- 长宽可以改变-->
                    height:200px;
                    position:relative;
                    top:50%;
                    left:50%;
                }
                .lastChildDiv {
                    100%;
                    height:100%;
                    position:relative;
                    right:50%;
                    background:red;
                    bottom:50%;
                }
            
            </style>
        </head>
        
        <div class="parentDiv"><!--父div-->
            <div class="childDiv"><!-- 过渡div-->
                 <div class="lastChildDiv"></div><!-- 子div-->
            </div>
        </div>

    </html>

  • 相关阅读:
    鸟哥的linux私房菜
    jquery mobile 移动web(2)
    jquery mobile 移动web(1)
    HTML5规范的本地存储
    初探css3
    移动设备HTML5页面布局
    jquery 操作ajax 相关方法
    jQuery 效果使用
    jquery 表单事件
    jquery鼠标事件
  • 原文地址:https://www.cnblogs.com/ai3xiaoyi/p/3932935.html
Copyright © 2011-2022 走看看