css设置页面居中的方法：1、“text-align: center ”设置水平居中。 2、“dispaly:flex”设置水平居中。3、“dis play :table-cell”设置垂直居中。4、“pos IT ion:absolute”设置垂直居中。
本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
居中在CSS中用的也比较常见，总结 几种 自己比较熟悉的居中的写法。当然，肯定还有更多更不错的写法，对于文中不足的地方也欢迎指正。
假设现在给出这种场景：
<p class="parent">
<p class="child">
DEMO
</p>
</p>其中在 class=& # 39;child' 这个div中的内容长度是不一定的，现在需要实现这个 div 的居中。
一、水平居中
1.1text-align: center
在块级父容器中让 行内元素 或者 类行内元素居中，只需使用 text-align: center ，
这种方法可以让 inline/inline-block/inline -t able/inline/flex 居中。
.child {
display:inline-block;
/*子元素文字会继承居中，因此要在上面写上向左边居中*/
text-align:left;
}
.parent {
text-align:center;
}当有多个 child div 的时候如果设置 display: inline-block 的时候需要注意每个div之间会有缝隙，这不 是什么 bug ，特性就是如此。
如果想去掉这些缝隙的话，有几种解决方法：
1、去掉HTML中的空格。
元素之间留白间距出现的 原因 是因为标签段之间的空隙，这个时候只需要去除掉 HTML 之间的空隙就好了。
比如这种写法，当然写法也有很多种，只要保证把空隙去掉就可以了，但是这种方法总 觉得 写起来有点反人类。
<p class="parent"> <p class="child"> DEMO1</p ><p class="child"> DEMO2</p ><p class="child"> DEMO3</p> </p>
2、使 用M arg in负值
这种方法这个负的值不太好确定，和上下文的字体 等等 都有关，这种方法不太适合大规模的使用。
.child {
mar gin -right; -5px;
}3、使用 font- Size: 0
这种方法能十分 简单 地这个间距问题，只需要将父 div 的 font -s ize 设为 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;
vert ical -align:middle;
}2.2 position: absolute
.parent {
position:relative;
}
.child{
position:absolute;
top:50%; /* 参照物是父容器 */
transform:translateY(-50%); /*百分比的参照物是自身 */推荐学习：CSS视频教程
以上就是css 怎样 设置页面居中的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 css怎样设置页面居中 全部内容，希望文章能够帮你解决 css怎样设置页面居中 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。