Home > Developer > Web Develop
Flexbox implements a DIV element that is horizontally vertically centered on the body page:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>flexbox CSS layout for horizontal vertical centering </title>
<style type= "Text/css" >
HTML {
height:100%;
}
Body {
Display:-webkit-box; /* old version syntax: Safari, IOS, Android Browser, older WebKit browsers. */
Display:-moz-box; /* old version syntax: Firefox (Buggy) */
Display:-ms-flexbox; /* Mixed version syntax: IE 10 */
Display:-webkit-flex; /* New version syntax: Chrome 21+ */
Display:flex; /* New version syntax: Opera 12.1, Firefox 22+ */
/* Vertical Center */
/* old version syntax */
-webkit-box-align:center;
-moz-box-align:center;
/* Mixed version syntax */
-ms-flex-align:center;
/* New version syntax */
-webkit-align-items:center;
Align-items:center;
/* Horizontal Center */
/* old version syntax */
-webkit-box-pack:center;
-moz-box-pack:center;
/* Mixed version syntax */
-ms-flex-pack:center;
/* New version syntax */
-webkit-justify-content:center;
Justify-content:center;
margin:0;
height:100%;
width:100%/* Needed for Firefox */
}
/* Implement text vertically centered */
. box {
Display:-webkit-box;
Display:-moz-box;
Display:-ms-flexbox;
Display:-webkit-flex;
Display:flex;
-webkit-box-align:center;
-moz-box-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
Align-items:center;
width:500px;
height:200px;
background:red;
Color: #fff;
Font-weight:bold;
font-size:30px;
}
</style>
<body>
<div class= "box" >flexbox CSS layout for horizontal vertical centering </div>
</body>
Flexbox CSS layout for horizontal vertical centering
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
