css3設置box-pack和box-align讓div裏面的元素垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #container{
    display: box;
    display: -webkit-box;
    display: -moz-box;
    width:800px;
    height: 200px;
    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>


</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章