实现 div 里面的内容div水平且垂直居中

Posted on 2015-04-07 22:08  小蕊同学  阅读(217)  评论(0编辑  收藏  举报

方案一(最佳方案)

复制代码
<!DOCTYPE HTML>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style>
        #demo{
            width:300px;
            height:300px;
            position: relative;
            background-color: #ff6600;
        }
        #indemo{
            width:100px;
            height:100px;
            position: absolute;
            left:0;right:0;top:0;bottom:0;
            margin:auto;
            background-color: white;
        }
    </style>
    
</head>
<body>
    <div id = 'demo'>
        <div id = 'indemo'></div>
    </div>
</body>
</html>
复制代码

 

方案二(该方案必须已知indemo的宽度和高度):

复制代码
        #demo{
            width:300px;
            height:300px;
            position: relative;
            background-color: #ff6600;
        }
        #indemo{
            width:100px;
            height:100px;
            position: absolute;
            left:50%;
            top:50%;
            margin-left: -50px;
            margin-top: -50px;            
            background-color: white;
        }
复制代码

 

方案三(不使用定位)

复制代码
        #demo{
            width:300px;
            height:300px;
            display: table-cell;
            vertical-align: middle;
            background-color: #ff6600;
        }
        #indemo{
            width:100px;
            height:100px;
            margin:0 auto;    
            background-color: white;
        }
复制代码

Copyright © 2024 小蕊同学
Powered by .NET 9.0 on Kubernetes