css中怎么实现div垂直居中

发布时间：2021-06-25 15:47:35 阅读：120 作者：Leah 栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

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垂直居中的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

css中怎么实现div垂直居中

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签