Align vertically using CSS 3
With CSS 3, are there any way to vertically align an block element? Do you have an example? Thank you.
Was looking at this problem recently, and tried:
HTML:
<body>
<div id="my-div"></div>
</body>
CSS:
#my-div {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
background: red;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Here's the Fiddle:
http://jsfiddle.net/sTcp9/6/
It even works when using "width/height: auto", in the place of fixed dimensions. Tested on the latest versions on Firefox, Chrome, and IE (* gasp *).
Note: This example uses the draft version of the Flexible Box Layout Module. It has been superseded by the incompatible modern specification.
Center the child elements of a div box by using the box-align and box-pack properties together.
Example:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
Using Flexbox:
.container {
display: flex;
/* Vertical align: */
align-items: center;
/* Horizontal align: */
justify-content: center;
}
jsFiddle: http://jsfiddle.net/maars/8Uyvf
Browser support: http://caniuse.com/flexbox (some browsers require prefix)
链接地址: http://www.djcxy.com/p/41484.html下一篇: 使用CSS 3垂直对齐