Horizontally and Vertically Centered:
By using flexible box model we can create data perfectly in center. Due to containing this data we can use the body element as a wrapper.
Example: Create a container .box, and then add two divs: one for the front size, and the other for the back.
HTML:
<body>
<div class="box">
<div>Hello</div>
<div> World </div>
</div>
</body>
Syntax: css
body, html { height: 100%; width: 100%; }
body {
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;
}
By using flexible box model we can create data perfectly in center. Due to containing this data we can use the body element as a wrapper.
Example: Create a container .box, and then add two divs: one for the front size, and the other for the back.
HTML:
<body>
<div class="box">
<div>Hello</div>
<div> World </div>
</div>
</body>
Syntax: css
body, html { height: 100%; width: 100%; }
body {
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;
}
No comments:
Post a Comment