Div Horizontal Center is easy, set CSS style text-align:center; It's OK.
Vertical Center also has a property vertical-align:middle; The normal setting of this property is not effective.
The first method: the vertical center effect can be achieved by a blank picture.
| The code is as follows | Copy Code |
| <title> picture centered </title> /* Define div size and horizontally center */ /* Auxiliary picture height fills Div, width is 0, so I don't see this picture */
|
|
Personally feel that the vertical-align:middle is relative to the left of the height of the vertical center, I give the left a fill div picture, you can achieve vertical center.
The second way: add a table to the Div.
| The code is as follows | Copy Code |
| <style> #a { Background: #fff000; width:500px; height:500px; Overflow:hidden; Text-align:center; } </style> <body> <div id= "a" > <table width= "100%" height= "100%" > <tr> <TD align= "center" > </td> </tr> </table> </div> </body> |
|
It's easy to set the center in the table.
After testing, neither of these approaches has a problem with browser incompatibility. The first method is recommended.
In addition, say Overflow:hidden; This property, when the picture size exceeds the size of the Div, will shadow the hidden part. If not set, the picture will be all displayed, overlay on the Div.
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
