zoukankan      html  css  js  c++  java
  • 关于居中的问题

    说起居中就来气,说居中可以看出工作经验,我总结几个,大家可以参考下

    1、行内元素的居中

    这点不用多说,水平居中用text-align:center,垂直居中用line-hight:高值

    2、已知宽高的块级元素居中

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
                #one{
                     400px;
                    height: 400px;
                    border: 1px solid red;
                    position: relative;/*父盒子要相对定位*/
                
                }
                #two{
                     100px;
                    height: 100px;
                    border: 1px solid blue;
                    position: absolute;/*子盒子要绝对定位*/
                    left: 50%;
                    top: 50%;
                    margin-top: -50px;/*向上偏移自身高度的一半*/
                    margin-left: -50px;    /*向左自身宽度的一半*/
                }
                    
            </style>
        </head>
        <body>
            <div id="one">
                <div id="two"></div>    
            </div>
        </body>
    </html>

    3、未知宽高的块级元素居中之table-cell

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>居中table</title>
            <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
                #one{
                     400px;
                    height: 400px;
                    border: 1px solid red;
                    display: table-cell;
                    vertical-align: middle;
                    text-align: center;
                    
                }
                #two{
                     100px;
                    height: 100px;
                    border: 1px solid blue;
                    display: inline-block;/*须转化为内联元素*/
                }
                
                
            </style>
        </head>
        <body>
            <div id="one">
                <div id="two"></div>    
            </div>
        </body>
    </html>

    4、未知宽高的块级元素居中之transform

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>css3transform</title>
            <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
                #one{
                     400px;
                    height: 400px;
                    border: 1px solid red;
                    position: relative;
                    
                
                }
                #two{
                     100px;
                    height: 100px;
                    border: 1px solid blue;
                    left: 50%;
                    top: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    position: absolute;
                }
                
                
            </style>
        </head>
        <body>
            <div id="one">
                <div id="two"></div>    
            </div>
        </body>
    </html>

    5、未知宽高的块级元素居中之弹性盒子布局

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>弹性盒子布局flex</title>
            <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
                #one{
                     400px;
                    height: 400px;
                    border: 1px solid red;
                    display: flex;
                    justify-content: center;/*水平居中*/
                    align-items: center;/*垂直居中*/
                }
                #two{
                     100px;
                    height: 100px;
                    border: 1px solid blue;
                }
                
                
            </style>
        </head>
        <body>
            <div id="one">
                <div id="two"></div>    
            </div>
        </body>
    </html>


     

  • 相关阅读:
    【bzoj2724】[Violet 6]蒲公英 分块+STL-vector
    【bzoj4026】dC Loves Number Theory 可持久化线段树
    【bzoj3744】Gty的妹子序列 分块+树状数组+主席树
    【bzoj3166】[Heoi2013]Alo 可持久化Trie树+STL-set
    【bzoj3060】[Poi2012]Tour de Byteotia 并查集
    【bzoj3510】首都 LCT维护子树信息(+启发式合并)
    【bzoj4530】[Bjoi2014]大融合 LCT维护子树信息
    【bzoj3261】最大异或和 可持久化Trie树
    【bzoj2081】[Poi2010]Beads Hash
    【bzoj4260】Codechef REBXOR Trie树
  • 原文地址:https://www.cnblogs.com/goweb/p/5577025.html
Copyright © 2011-2022 走看看