css设置页面居中的方法：1、“text-align:center”设置水平居中。 2、“dispaly:flex”设置水平居中。3、“display:table-cell”设置垂直居中。4、“position:absolute”设置垂直居中。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
居中在CSS中用的也比较常见，总结几种自己比较熟悉的居中的写法。当然，肯定还有更多更不错的写法，对于文中不足的地方也欢迎指正。
假设现在给出这种场景：
DEMO
其中在class='child'这个div中的内容长度是不一定的，现在需要实现这个div的居中。
一、水平居中
1.1text-align: center
在块级父容器中让行内元素或者类行内元素居中，只需使用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;}
1.2 dispaly: flex
只兼容IE10+
.parent { display:flex; justify-content:center;}/*或者*/.child{ margin：0 auto;}
二、垂直居中
1.1display: table-cell
可以使高度不同的元素都垂直居中
.parent { display:table-cell; vertical-align:middle;}
2.2 position: absolute
.parent { position:relative;}.child{ position:absolute; top:50%; /* 参照物是父容器 */ transform:translateY(-50%); /*百分比的参照物是自身 */
推荐学习：CSS视频教程
以上就是css怎样设置页面居中的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1621508.html
微信扫一扫 
支付宝扫一扫 
