css3设置box-pack和box-align让div里面的元素垂直居中


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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">列1div>
    <div id="div2">列2div>
    <div id="div3">列3div>
    div>


body>
html>

你可能感兴趣的:(HTML5+CSS3)