Home > Developer > JavaScript
Three vertical (horizontal) center techniques, position, table-cell, and flex-box, table-cellflex-box
I. The first is the favorite position method, which is classic and omnipotent. Its usage is as follows:
1 parent element {2 position: relative; 3} 4 child element {5 position: absolute; 6 top: 50%; 7 left: 50%; 8 margin-top: /* negative value of height * 0.5 */; 9 margin-left:/* negative value of width * 0.5 */; 10}
Left and margin-left can be removed without horizontal center.
Focus:YesBoth the parent and child elements define the width and height., Adaptive is not adaptive, and it is impossible for the whole life to be adaptive.
Ii. display: table-cell enables vertical center layout of elements with unfixed sizes. First use:
Parent element {display: table-cell; vertical-align: middle;} child element {vertical-align: middle ;}
In addition to the common vertical center of images with different width and height, table-cell Layout can also achieve adaptive two-column layout (comment area, etc ):
The Code is as follows:
HTML section:
<Div class = "wrap"> <div class = "img"> </ div> <div class = "text"> <p> text </p> </div>
CSS section:
<style type="text/css"> .wrap{ display: table-row; } .img{ display: table-cell; vertical-align: middle; text-align: center; width: 100px; border: 1px solid #000; } .text{ display: table-cell; width: 300px; border: 1px solid #000; padding: 10px; } .wrap div+div{ border-left: none; }</style>
In addition, table-cell can automatically distribute multiple sub-elements in the same width without calculating the width by yourself:
The Code is as follows:
ul{ list-style-type:none; display: table; width: 250px; padding: 0; } li{ display: table-cell; text-align: center; } li+li{ border-left: 1px solid #000; }
Key points: 1. not supported by IE6/7; 2. table-cell does not support the margin attribute (but supports padding ),Very stiff3. Try not to use it with float/location at the same time, which will damage its css attributes.
3. If you use ie, we will not be able to become a friend of the flexible layout artifact flex-box. The usage is as follows:
Parent element {display: flex/* In-row elements use inline-flex */align-items: center;/* When the spindle is horizontal (default )*/}
The principle is to align the child element (scaling project) of the flex-box along the side axis (when the default flex-direction: row, the side axis is vertical.
Using flex-wrap, you can also fold and display the content in the scaling container:
When you adjust the width of the view to PX:
The Code is as follows:
<Head> <meta charset = "UTF-8"> <title> </title> <style type = "text/css"> * {margin: 0; padding: 0 ;} # box {display: flex; flex-wrap: wrap; justify-content: center;/* align the center of the spindle */align-items: center; /* align the side axis in the center */padding: 50px; font-size: 2.5em; font-weight: bold; text-align: center; border: 1px solid #000 ;} </style>
Browser compatibility:
Compatibility with earlier browsers:
Display:-moz-box;/* earlier firefox */
Display:-webkit-box;/* IOS 6-, safari 3.1-6 */
------
Display:-ms-flexbox;/* IE10 */
Display:-webkit-flex;/* Chrome 21 +, Safari 6.1 +, iOS Safari 7 +, Opera 15/16 */
Display:-moz-flex;/* earlier firefox */
Display: flex;/* IE11, Chrome29 +, FireFox 20 + */
Refer:
Compatibility:
Https://zhuanlan.zhihu.com/p/21640023
Http://www.cnblogs.com/iriszhang/p/6102524.html
Solve the compatibility bug of flex-box:
Http://www.w3cplus.com/css3/normalizing-cross-browser-flexbox-bugs.html
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
