css如何设置页面居中

这篇文章主要讲解了"css如何设置页面居中"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"css如何设置页面居中"吧！

本教程操作环境：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如何设置页面居中这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！