Home > Developer > Web Develop
The question of how CSS vertically centers an element is already a cliché. Whether for a novice or a veteran, during the interview is often asked. Two days ago in a flex video tutorial, which mentions the question of the center of the element, so today small series to grilled a few common ways. The shortcomings please criticize (all the code is self-tapping available)
1, Horizontal center (margin:0 auto;)
About this, everyone should be the most unfamiliar, whether in training courses or self-taught words. This should be the first way the teacher speaks (horizontally), but there is a premise that the element being wrapped cannot have a floating property. Otherwise, the attribute will be invalidated. Specific as code:
| 12345678910111213141516171819 | |
| 1 |
2, horizontal center (text-align:center;)
This property can be converted to Inline/inline-block without a float, and then its parent element is added to the Text-align:center, and the property can be centered
| 1234567891011121314151617181920 | |
3, Horizontal vertical Center (a) The child element is absolutely positioned relative to the parent element, and the margin value is less than half the width of its height
This method has some limitations because it has to know the height of the child element itself
<style> body{margin:0;} . box{ width:400px; height:400px; border:1px solid red; position:relative; } item{ Position:absolute; top:50%; left:50%; Margin-top: -50px; Margin-left: -50px; width:100px; height:100x; Background:green; } </style><body> <div class= "box" > <div class= "item" ></div> </div ></body>4, Horizontal vertical Center (ii) The child element is absolutely positioned relative to the parent element, and the margin value bit auto
This method is not limited by the width and height of the element, it is more useful (recommended)
<style> body{margin:0;} . box{ width:400px; height:400px; border:1px solid red; position:relative; } item{ Position:absolute; left:0; right:0; bottom:0; top:0; Margin:auto; width:100px; height:100x; Background:green; } </style><body> <div class= "box" > <div class= "item" ></div> </div ></body>5, Horizontal Vertical Center (c) Diplay:table-cell
This is done by converting the elements to a table style and then centering with the table's style (recommended)
<style> body{margin:0;} . box{ width:400px; height:400px; border:1px solid red; Display:table-cell; Vertical-align:middle; } item{ margin:0 auto; width:100px; height:100x; Background:green; } </style><body> <div class= "box" > <div class= "item" ></div> </div ></body>6, Horizontal vertical Center (four) absolute positioning and Transfrom
The method with the most can be forced to use the CSS3 deformation, the interviewer see you code inside there is such, you force lattice instantly went up, of course, you know, forcing lattice of things is a compatibility problem
<style> body{margin:0;} . box{ width:400px; height:400px; border:1px solid red; position:relative; } item{ width:100px; height:100x; Background:green; Position:absolute; left:50%; top:50%; Transform:translate ( -50%,-50%); } </style><body> <div class= "box" > <div class= "item" ></div> </div ></body>7. Horizontal Vertical Center (V) Flex properties in CSS3
This property is very useful, but there is no compatibility problem, users should pay attention to
<style> body{margin:0;} . box{ width:400px; height:400px; border:1px solid red; Display:flex; Justify-content:center; Align-items:center; } item{ width:100px; height:100x; Background:green; } </style><body> <div class= "box" > <div class= "item" ></div> </div ></body> on how an element in CSS is centered in its parent element
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
