任意长宽度子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>

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