DIV常用的居中方法_html/css_WEB-ITnose

一.div常用的居中方法：

①利用相对定位设置div外边距自动调整达到居中效果（ps:如果IE浏览器无效果还要在Body里面加上''text-align:center''这个属性,或是外面再加一层DIV，设置属性''text-align:center''），当然居中也有另一种写法：margin-left:auto;margin-right:auto             最重要的是div必须设置width属性

1 2   <div style="width:500px;margin:0 auto">3        .......4   </div>5 

 

②利用left和margin-left两个属性，先将div块设置为margin-left：50%（这表示这个div块的最左边那条边在中间），然后left属性值为div块宽度的负一半，

符号表示div向左边移动宽度的一半。补充说明一下：直接在css中设置left生效的前提是必须设置父容器position:absolute或relative

 1  2  3  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 18 19 20     <div id="myDiv_1"></div>21 22 

 

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！