Home >Web Front-end >HTML Tutorial >Commonly used centering methods for DIV_html/css_WEB-ITnose
Commonly used centering methods for DIV_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:021053browse
1. Commonly used centering methods for DIV:
① Use relative positioning to set the div outer margins to automatically adjust to achieve the centering effect (ps: If the IE browser has no effect, it must be in the Body Add the attribute ''text-align:center'', or add a layer of DIV outside and set the attribute ''text-align:center''). Of course, there is another way to write center: margin-left:auto; margin-right: auto Attribute, first set the div block to margin-left: 50% (this means that the leftmost side of the div block is in the middle), and then the left attribute value is negative half of the width of the div block,
Thesymbol means that the div is moved to the left by half its width. Additional explanation: For setting left directly in CSS to take effect, the parent container position must be set: absolute or relative
1 <body>2 <div style="width:500px;margin:0 auto">3 .......4 </div>5 </body>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 #myDiv_1{ 8 width:300px; 9 height:200px;10 background-color:#F00; 11 12 margin-left:50%;13 position:absolute;14 left:-150px;15 }16 </style>17 </head>18 19 <body>20 <div id="myDiv_1"></div>21 </body>22 </html>