css怎样实现水平居中
这篇文章主要介绍了css怎样实现水平居中，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联公司主打移动网站、成都网站设计、成都网站建设、网站改版、网络推广、网站维护、主机域名、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。
假设现在给出这种场景：
DEMO
其中在 class='child' 这个 div 中的内容长度是不一定的，现在需要实现这个 div 的居中。
水平居中
1 display: inline-block
在块级父容器中让行内元素或者类行内元素居中，只需使用 text-align: center，
这种方法可以让 inline/inline-block/inline-table/inline/flex 居中。
.child {
display:inline-block;
/*子元素文字会继承居中，因此要在上面写上向左边居中*/
text-align:left;
}
.parent {
text-align:center;
}当有多个 child div 的时候如果设置 display: inline-block 的时候需要注意每个 div 之间会有缝隙，这不是什么 bug ，特性就是如此。。
如果想去掉这些缝隙的话，有几种解决方法：
1.去掉 HTML 中的空格。
元素之间留白间距出现的原因是因为标签段之间的空隙，这个时候只需要去除掉 HTML 之间的空隙就好了。
比如这种写法，当然写法也有很多种，只要保证把空隙去掉就可以了，但是这种方法总觉得写起来有点反人类。
DEMO1
DEMO2
DEMO3
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怎样实现水平居中”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
文章标题：css怎样实现水平居中
文章源于：http://cxhlcq.com/article/joehih.html
-
在线咨询
微信咨询
电话咨询
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回顶部
重庆分公司
重庆分公司
