CSS如何实现水平居中的4种思路简要概述

互联网
别自制压力，我们没有必要跟着时间走，只需跟着心态和能力走，随缘，尽力，达命，问心无愧，其他的，交给天。

前面的话

　　水平居中是经常遇到的问题。看似方法较多，条条大路通罗马。但系统梳理下，其实都围绕着几个思路展开。本文将介绍关于水平居中的4种思路，感兴趣的朋友参考下吧！

思路一：在父元素中设置text-align:center实现行内元素水平居中

　　将子元素的display设置为inline-block，使子元素变成行内元素

　　[注意]若要兼容IE7-浏览器，可使用display:inline;zoom:1;来达到inline-block的效果

CSS Code复制内容到剪贴板
  1. <style>
  2. .parent{text-align:center;}
  3. .child{display:inline-block;}
  4. </style>
  5. <divclass="parent"style="background-color:gray;">
  6. <divclass="child"style="background-color:lightblue;">DEMO</div>
  7. </div>

思路二：在本身元素设置margin: 0 auto实现块级元素水平居中

【1】将子元素的display为table，使子元素成为块级元素，同时table还具有包裹性，宽度由内容撑开

　　[注意]若要兼容IE7-浏览器，可把child的结构换成<table class="child">DEMO</table>

CSS Code复制内容到剪贴板
  1. <style>
  2. .child{
  3. display:table;
  4. margin:0auto;
  5. }
  6. </style>
  7. <divclass="parent"style="background-color:gray;">
  8. <divclass="child"style="background-color:lightblue;">DEMO</div>
  9. </div>

【2】若子元素定宽，则可以使用绝对定位的盒模型属性，实现居中效果；若不设置宽度时，子元素被拉伸

CSS Code复制内容到剪贴板
  1. <style>
  2. .parent{
  3. position:relative;
  4. }
  5. .child{
  6. position:absolute;
  7. left:0;
  8. rightright:0;
  9. margin:0auto;
  10. width:50px;
  11. }
  12. </style>
  13. <divclass="parent"style="background-color:gray;height:20px;">
  14. <divclass="child"style="background-color:lightblue;">DEMO</div>
  15. </div>

思路三: 通过绝对定位的偏移属性实现水平居中

【1】配合translate()位移函数

　　translate函数的百分比是相对于自身宽度的，所以left:50%配合translateX(-50%)可实现居中效果

　　[注意]IE9-浏览器不支持

CSS Code复制内容到剪贴板
  1. <style>
  2. .parent{
  3. position:relative;
  4. }
  5. .child{
  6. position:absolute;
  7. left:50%;
  8. transform:translateX(-50%);
  9. }
  10. </style>
  11. <divclass="parent"style="background-color:gray;height:20px;">
  12. <divclass="child"style="background-color:lightblue;">DEMO</div>
  13. </div>

【2】配合relative

　　relative的偏移属性是相对于自身的，因为子元素已经被设置为absolute，所以若使用relative，则需要增加一层<div>结构，使其宽度与子元素宽度相同

　　[注意]该方法全兼容，但是增加了html结构

CSS Code复制内容到剪贴板
  1. <style>
  2. .parent{
  3. position:relative;
  4. }
  5. .childWrap{
  6. position:absolute;
  7. left:50%;
  8. }
  9. .child{
  10. position:relative;
  11. left:-50%;
  12. }
  13. </style>
  14. <divclass="parent"style="background-color:gray;height:20px;">
  15. <divclass="childWrap">
  16. <divclass="child"style="background-color:lightblue;">DEMO</div>
  17. </div>
  18. </div>

【3】配合负margin

　　margin的百分比是相对于包含块的，所以需要增加一层<div>结构。由于宽度width的默认值是auto，当设置负margin时，width也会随着变大。所以此时需要定宽处理

　　[注意]虽然全兼容，但需要增加页面结构及定宽处理，所以限制了应用场景

CSS Code复制内容到剪贴板
  1. <style>
  2. .parent{
  3. position:relative;
  4. }
  5. .childWrap{
  6. position:absolute;
  7. left:50%;
  8. }
  9. .child{
  10. width:50px;
  11. margin-left:-50%;
  12. }
  13. </style>
  14. <divclass="parent"style="background-color:gray;height:20px;">
  15. <divclass="childWrap">
  16. <divclass="child"style="background-color:lightblue;">DEMO</div>
  17. </div>
  18. </div>

思路四: 使用弹性盒模型flex实现水平居中

　　[注意]IE9-浏览器不支持

【1】在伸缩容器上设置主轴对齐方式jusify-content:center

CSS Code复制内容到剪贴板
  1. <style>
  2. .parent{
  3. display:flex;
  4. justify-content:center;
  5. }
  6. </style>
  7. <divclass="parent"style="background-color:gray;">
  8. <divclass="child"style="background-color:lightblue;">DEMO</div>
  9. </div>

【2】在伸缩项目上设置margin: 0 auto

CSS Code复制内容到剪贴板
  1. <style>
  2. .parent{display:flex;}
  3. .child{margin:0auto;}
  4. </style>
  5. <divclass="parent"style="background-color:gray;">
  6. <divclass="child"style="background-color:lightblue;">DEMO</div>
  7. </div>



到此这篇关于CSS如何实现水平居中的4种思路简要概述就介绍到这了。小时候，和泥为了好玩，长大了，和泥为了养家。小时候和泥，无师自通，长大了和泥，要交学费叫做土木工程。原来这就叫做兴趣是最好的老师！更多相关CSS如何实现水平居中的4种思路简要概述内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例