css中怎么实现div垂直居中

css中怎么实现div垂直居中，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>CSS实现div居中</title> 
    <style> 
    /*外层div居中*/
    #main {
        position: absolute;        /*极为重要*/
        background-color: blue;
        width:400px;
        height:200px;
        left:50%;
        top:50%; 
        margin-left:-200px;
        margin-top:-100px;
        border:1px solid #00F;
    } 
 
    #content {
        position: absolute;        /*极为重要*/
        background-color: yellow;
        width: 200px;
        height: 100px;
        left:50%;
        top:50%; 
        margin-left:-100px;
        margin-top:-50px;
        
        /*div内部文字居中*/
        text-align: center;
        line-height:100px;        /*行间距和div宽度相同*/
    }
    </style> 
    <body> 
        <div id="main">
            <div id="content">
                Sun
            </div>
        </div> 
    </body> 
    </html>

看完上述内容，你们掌握css中怎么实现div垂直居中的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注行业资讯频道，感谢各位的阅读！

css中怎么实现div垂直居中

相关推荐