实现CSS居中的方法有哪些
这篇文章主要介绍了实现CSS居中的方法有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
专注于为中小企业提供网站设计、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业临县免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
假设现在给出这种场景:
DEMO
其中在 class='child' 这个 div 中的内容长度是不一定的,现在需要实现这个 div 的居中。
水平居中
1.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 之间的空隙就好了。
比如这种写法,当然写法也有很多种,只要保证把空隙去掉就可以了,但是这种方法总觉得写起来有点反人类。
DEMO1DEMO2DEMO3
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; }
1.2 display:table
table 元素的宽度也是跟着内容走,居中的时候加上 margin 即可。兼容IE8。
如果不设置成table,设置成别的块级元素也可以,但是要强调设置宽度width,不然会拉伸成父元素的宽度。(注意加上 width 这种方法拓展性不好,如果 child div 里面的内容很长的话可能超过设置的 width 的宽度)
.child { display:table; margin:0 auto; }
1.3 position: absolute
absolute 元素的宽度默认也是由内容决定
这种方法的优点是居中的元素不会对其他元素产生影响 脱离正常流
.parent { position:relative; } .child{ position:absolute; /*参照物是父容器*/ left:50%; transform:translateX(-50%); /*百分比的参照物是自身*/
1.4 dispaly: flex
只兼容IE10+
.parent { display:flex; justify-content:center; } /*或者*/ .child{ margin:0 auto; }
2.垂直居中
2.1 display: table-cell
可以使高度不同的元素都垂直居中
.parent { display:table-cell; vertical-align:middle; }
2.2 position: absolute
.parent { position:relative; } .child{ position:absolute; top:50%; /* 参照物是父容器 */ transform:translateY(-50%); /*百分比的参照物是自身 */ }
2.3 display: flex
只兼容IE10+
.parent { display:flex; align-items:center; } /*或者*/ .child{ margin:0 auto; }
3.水平垂直居中
这种就只需要把前几种的结合起来就行了,主要有三种常见的方法。
3.1 inline-block + table-cell
.child { display:inline-block; text-align:left; } .parent { text-align:center; display:table-cell; vertical-align:middle; } /*子元素文字会继承居中,因此要在上面写上向左边居中*/
3.2 absolute + transform
.parent { position:relative; } .child{ position:absolute; left:50%; top:50%; /*参照物是父容器*/ transform:translate(-50%,-50%); /*百分比的参照物是自身*/ }
3.3 flex + align-items + justify-content
.parent { display:flex; justify-content:center; align-items:center; }
感谢你能够认真阅读完这篇文章,希望小编分享的“实现CSS居中的方法有哪些”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
文章名称:实现CSS居中的方法有哪些
浏览地址:http://scyanting.com/article/pggpso.html