理解水平居中的几种表现
2018-10-14 10:49:18来源：博客园 阅读 ()
1.水平居中
text-align
【场景一】：在父元素中设置text-align:center实现行内元素水平居中
将子元素的display设置为inline-block，使子元素变成行内元素
[注意]若要兼容IE7-浏览器，可使用display:inline;zoom:1;来达到inline-block的效果
html代码：
1 <div class="parent" style="background-color: gray;"> 2 <div class="child" style="background-color: lightblue;">DEMO</div>
css代码：
1 .parent{text-align: center;} 2 .child{display: inline-block;}
这种方法的不足之处在于，子元素的text-align继承了父元素的center，文字也居中显示，所以需要在子元素中设置text-align:left
margin
【场景二】：在本身元素设置margin: 0 auto实现块级元素水平居中
将子元素的display为table，使子元素成为块级元素，同时table还具有包裹性，宽度由内容撑开
[注意]若要兼容IE7-浏览器，可把child的结构换成<table class="child">DEMO</table>
html代码：
1 <div class="parent" style="background-color: gray;"> 2 <div class="child" style="background-color: lightblue;">DEMO</div> 3 </div>
css代码：
1 .child{ 2 display: table; 3 margin: 0 auto; 4 }
该方案的优点在于，只设置父级元素即可实现居中效果
【场景三】：若子元素定宽，则可以使用绝对定位的盒模型属性，实现居中效果；若不设置宽度时，子元素被拉伸
html代码：
1 <div class="parent" style="background-color: gray;height: 20px;"> 2 <div class="child" style="background-color: lightblue;">DEMO</div> 3 </div>
css代码：
1 .parent{ 2 position: relative; 3 } 4 .child{ 5 position: absolute; 6 left: 0; 7 right: 0; 8 margin: 0 auto; 9 width: 50px; 10 }
absolute
【思路四】: 通过绝对定位的偏移属性实现水平居中
配合translate()位移函数
translate函数的百分比是相对于自身宽度的，所以left:50%配合translateX(-50%)可实现居中效果
[注意]IE9-浏览器不支持
html代码：
1 <div class="parent" style="background-color: gray;height: 20px;"> 2 <div class="child" style="background-color: lightblue;">DEMO</div> 3 </div>
css代码：
1 .parent{ 2 position: relative; 3 } 4 .child{ 5 position: absolute; 6 left: 50%; 7 transform:translateX(-50%); 8 }
【思路五】relative数值型的偏移属性是相对于自身的，但百分比却是相对于包含块的。因为子元素已经被设置为absolute，所以若使用relative，则需要增加一层<div>结构，使其宽度与子元素宽度相同
[注意]该方法全兼容，但是增加了html结构
html代码：
1 <div class="parent" style="background-color: gray;height: 20px;"> 2 <div class="childWrap"> 3 <div class="child" style="background-color: lightblue;">DEMO</div> 4 </div> 5 </div>
css代码：
1 .parent{ 2 position: relative; 3 } 4 .childWrap{ 5 position: absolute; 6 left: 50%; 7 } 8 .child{ 9 position: relative; 10 left: -50%; 11 }
【思路六】配合负margin
margin的百分比是相对于包含块的，所以需要增加一层<div>结构。由于宽度width的默认值是auto，当设置负margin时，width也会随着变大。所以此时需要定宽处理
[注意]虽然全兼容，但需要增加页面结构及定宽处理，所以限制了应用场景
html代码：
1 <div class="parent" style="background-color: gray;height: 20px;"> 2 <div class="childWrap"> 3 <div class="child" style="background-color: lightblue;">DEMO</div> 4 </div> 5 </div>
css代码：
1 .parent{ 2 position: relative; 3 } 4 .childWrap{ 5 position: absolute; 6 left: 50%; 7 } 8 .child{ 9 width:50px; 10 margin-left:-50%; 11 }
flex
【思路七】: 使用弹性盒模型flex实现水平居中
[注意]IE9-浏览器不支持
在伸缩容器上设置主轴对齐方式justify-content:center
html代码：
1 <div class="parent" style="background-color: gray;"> 2 <div class="child" style="background-color: lightblue;">DEMO</div> 3 </div>
css代码：
1 .parent{ 2 display: flex; 3 justify-content: center; 4 }
【思路八】在伸缩项目上设置margin: 0 auto
html代码：
1 <div class="parent" style="background-color: gray;"> 2 <div class="child" style="background-color: lightblue;">DEMO</div> 3 </div>
css代码：
1 .parent{display: flex;} 2 .child{margin: 0 auto;}
grid
【思路九】: 使用栅格布局grid实现水平居中
[注意]IE10-浏览器不支持
在网格容器上设置justify-items或justify-content
html代码：
1 <div class="parent" style="background-color: gray;"> 2 <div class="child" style="background-color: lightblue;">DEMO</div> 3 </div>
css代码：
1 .parent{ 2 display:grid; 3 justify-items:center; 4 /*justify-content:center;*/ 5 }
【思路十】在网格项目中设置justify-self或者margin: 0 auto
html代码：
1 <div class="parent" style="background-color: gray;"> 2 <div class="child" style="background-color: lightblue;">DEMO</div> 3 </div>
css代码：
1 .parent{ 2 display:grid; 3 } 4 .child{ 5 justify-self:center; 6 /*margin: 0 auto;*/ 7 }
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- 理解content(二) 2020-06-07
- 循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Sto 2020-05-25
- 自学web前端达到什么水平，才能满足求职的标准？ 2020-05-04
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
