css3實現浮動元素垂直水平居中

本文轉載自查看原文 2017-08-31 01:18 1505

　　如果給定了父元素和子元素的寬高，那么讓子元素在父元素內實現垂直水平居中有很多種方法，但是碰到元素的寬高不確定的情況下，或是浮動之后的元素要居中就比較麻煩了，以下提供一些css3的屬性來解決這個問題。

    <body>
        <div class="wrapper">
            <ul class="links">
                <li>
                    <a href="#">Link1</a>
                </li>
                <li>
                    <a href="#">Link2</a>
                </li>
                <li>
                    <a href="#">Link3</a>
                </li>
                <li>
                    <a href="#">Link4</a>
                </li>
            </ul>
        </div>
    </body>

        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        
        .wrapper {
            /*不論父容器設置的寬高是多少,都不會影響子元素的居中*/
            
            /*width: 75%;
            height: 10em;
            margin: 4em auto 0;*/
            background: lightgoldenrodyellow;
            
            display: -webkit-box;
            display: -ms-flex;
            display: -webkit-flex;
            display: flex;
            
            -webkit-box-pack: center;
            -ms-justify-content: center;
            -webkit-justify-content: center;
            justify-content: center;
            
            -webkit-box-align: center;
            -ms-align-items: center;
            -webkit-align-items: center;
            align-items: center;
        }
        
        .links li{
            float: left;
            margin-right: 2em;
            background: cadetblue;
        }
        /*.links li:last-child{
            margin: 0;
        }*/
        .links li a{
            font-size: 2em;
            color: yellow;
        }

　　由於現在設備和的屏幕的大小差異很大，所以我們在給頁面布局時會考慮項目是否有自適應的效果，很多時候是不能寫死容器的寬高的，這種彈性布局很好地處理了這個問題，還有一個好處在於可以讓浮動之后的元素（例如li）也獲取這種居中效果。不管有沒有給子元素設置浮動屬性，還是向左浮動或向右浮動都不會影響子元素的定位。但因為瀏覽器對這些css3的特性並不一定完全支持，所以還需要寫一些css hack來處理兼容問題。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 用CSS 實現浮動元素的水平居中 css/css3實現未知寬高元素的垂直居中和水平居中 CSS3 FLEXBOX輕松實現元素的水平居中和垂直居中 CSS3 Flexbox輕松實現元素的水平居中和垂直居中 css垂直水平居中實現的方式用CSS/CSS3 實現水平居中和垂直居中的完整攻略浮動元素如何水平居中 CSS實現元素居中樣式（水平居中和垂直居中） css元素水平居中和垂直居中的方式 CSS-元素水平居中、垂直居中、水平垂直居中解決方案