css3中的垂直居中布局(垂直或居中)

来源:互联网 发布:3d实景地图 知乎 编辑:程序博客网 时间:2024/06/08 05:42

经常我们需要对我们网页的元素进行垂直或是居中定位,在非ie,或是移动端的页面中可以使用如下代码来实现:



<html>
    <head>
    <style type="text/css"> 
        #container{ 
        display: box; 
        display: -webkit-box; 
        display: -moz-box; 
        width:100%; 
        height: 100%; 
        border: 1px solid #ccc; 
/*
        -webkit-box-pack:center; 
        -moz-box-pack:center; 
*/
        -webkit-box-align:center; 
        -moz-box-align:center; 
        } 
        #div1{ 
        background: orange;

        } 
        #div2{ 
        background: yellow; 

        } 
        #div3{ 
        background: green; 
        } 
        </style> 
    </head>
    <body>
        <div id="container"> 
        <div id="div1">列1</div> 
        <div id="div2">列2</div> 
        <div id="div3">列3</div> 
<div><img src="img.png" width="200px" height="200px"></img></div>
        </div> 
    </body>
</html>

0 0
原创粉丝点击