2.使用 margin 负值

这种方法这个负的值不太好确定，和上下文的字体等等都有关，这种方法不太适合大规模的使用。

.child {
  margin-right; -5px;
}

3.使用 font-size: 0

这种方法能十分简单地这个间距问题，只需要将父 div 的 font-size 设为0 ，然后记得将子 div 的 font-size 属性设置回来即可。

.parent {
  font-size: 0;
}
.chilc {
  font-size: 16px;
}

4.使用 letter-spacing 或者 word-spacing

.parent {
  letter-spacing: -5px;
  /*或者*/
  word-spacing: -5px;
}
.chilc {
  letter-spacing: 0;
  /*或者*/
  word-spacing: 0;
}

2 display:table

table 元素的宽度也是跟着内容走，居中的时候加上 margin 即可。兼容IE8。

如果不设置成table,设置成别的块级元素也可以，但是要强调设置宽度width，不然会拉伸成父元素的宽度。(注意加上 width 这种方法拓展性不好，如果 child div 里面的内容很长的话可能超过设置的 width 的宽度)

.child {
  display:table;
  margin:0 auto;
}

3 position: absolute

absolute 元素的宽度默认也是由内容决定

这种方法的优点是居中的元素不会对其他元素产生影响 脱离正常流

.parent {
  position:relative;
}
.child{
  position:absolute; /*参照物是父容器*/
  left:50%;
  transform:translateX(-50%); /*百分比的参照物是自身*/

4 dispaly: flex

只兼容IE10+

.parent {
  display:flex;
  justify-content:center;
}
/*或者*/
.child{
  margin：0 auto;
}

感谢你能够认真阅读完这篇文章，希望小编分享的“css怎样实现水平居中”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉，无效全额退款

X

合作意向表

公司名称

邮箱

姓名

电话

您需要的服务

高端网站建设

我需要做微信营销

要找长期合作，需要年度服务

我需要做购物商城

我需要网站改版

其他

您关注的地方

对功能要求比较高

对设计创意要求比较高

需要可以购物支付

搜索引擎排名

预算

一万以内

1-3万

3-5万

5万以上

需招投标

验证码