两个div浮动后使它水平垂直居中

使用相对定位position:relative(注意两个都要设置,下面有代码。)

两个div浮动后使它水平垂直居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>内联样式</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            #box{
                width:800px;
                height:800px;
                background-color:lightgray;    
            }
            #left{
                width:200px;
                height:700px;
                background-color:lightblue;
                float:left;
                position:relative;
                left:50px;
                top:50px;
            }
            #right{
                width:500px;
                height:700px;
                background-color:red;
                float:left;
                position:relative;
                left:50px;
                top:50px;
            }
        </style>
    
    </head>    
    <body>
        <div id="box">
        <div id="left">nav</div>
        <div id="right">section</div>
        </div>
    </body>
</html>