码迷,mamicode.com
首页 > 其他好文 > 详细

任意长宽度子div在任意长宽度父div垂直水平居中

时间:2014-08-24 17:52:23      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:style   os   io   ar   div   html   sp   ad   on   

<DocType html>
<html>
    <head>
        <title>任意长宽度高度垂直水平居中div</title>
        <style>
            .parentDiv{
                width:500px;<!-- 长宽可以改变-->
                height:500px;
                margin:0 auto;
                background:blue;            
            }
            .childDiv{
                width:200px;<!-- 长宽可以改变-->
                height:200px;
                position:relative;
                top:50%;
                left:50%;
            }
            .lastChildDiv {
                width: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>

任意长宽度子div在任意长宽度父div垂直水平居中

标签:style   os   io   ar   div   html   sp   ad   on   

原文地址:http://www.cnblogs.com/ai3xiaoyi/p/3932935.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!