As long as you set the element's Box-pack and box-align, these two properties are currently only WebKit and Moz support, to set the vertical center, you only need to set the values of these two properties to center, the need for friends can refer to the following The previous way to handle vertical centering is to set the div's height and line-height to be the same value, and now it's not that troublesome. These two properties are currently only supported by WebKit and Moz, as long as the box-pack and box-align of the elements are set. Where Box-pack control is the horizontal left and right, the values are: Start (left), Center (center), End (right). The box-align values are: Start (top), center (center), End (bottom). If we want to set the vertical center, we just need to set the values of both properties to center. Of course, the premise is to use the CSS3 box layout, which will set the display of the outer element to box
Copy CodeThe code is as follows:
<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>
<body>
<div id= "Container" >
<div id= "DIV1" > Column 1</div>
<div id= "DIV2" > Column 2</div>
<div id= "Div3" > Column 3</div>
</div>
</body>
CSS3 set Box-pack and box-align to align the elements inside the div vertically
