css3实现浮动元素垂直水平居中

　　如果给定了父元素和子元素的宽高，那么让子元素在父元素内实现垂直水平居中有很多种方法，但是碰到元素的宽高不确定的情况下，或是浮动之后的元素要居中就比较麻烦了，以下提供一些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来处理兼容问题。

　　更多参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

posted @ 2017-08-31 01:18  Western_Journalist  阅读(2821)  评论(0)  编辑  收藏  举报