zoukankan      html  css  js  c++  java
  • 实现 div 里面的内容div水平且垂直居中

    方案一(最佳方案)

    复制代码
    <!DOCTYPE HTML>
    <html>
    <head>
        <title>test</title>
        <meta charset="utf-8">
        <style>
            #demo{
                300px;
                height:300px;
                position: relative;
                background-color: #ff6600;
            }
            #indemo{
                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{
                300px;
                height:300px;
                position: relative;
                background-color: #ff6600;
            }
            #indemo{
                100px;
                height:100px;
                position: absolute;
                left:50%;
                top:50%;
                margin-left: -50px;
                margin-top: -50px;            
                background-color: white;
            }
    复制代码

    方案三(不使用定位)

    复制代码
            #demo{
                300px;
                height:300px;
                display: table-cell;
                vertical-align: middle;
                background-color: #ff6600;
            }
            #indemo{
                100px;
                height:100px;
                margin:0 auto;    
                background-color: white;
            }
    复制代码
  • 相关阅读:
    2017/4/14 afternoon
    2017/4/14 morning补
    2017/4/13 afternoon
    2017/4/13 morning
    2017/4/12 afternoon
    2017/4/12 morning
    4.17上午
    4.14上午
    4.13下午
    4.13上午
  • 原文地址:https://www.cnblogs.com/lsr111/p/4399772.html
Copyright © 2011-2022 走看看