这篇文章主要介绍了如何使用CSS实行居中，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
CSS居中在设计中经常使用，我们在使用css来布局时经常需要进行居中，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，利用css来实现对象的垂直居中有许多不同的方法，比较难的是应该选择哪种正确的方法。比如我们都知道 margin:0 auto;的样式能让元素水平居中，而margin: auto;却不能做到垂直居中。下面就css居中的一些常用方法做个集中的介绍。
首先是水平居中，最简单的办法当然就是：
margin:0 auto;
文字的水平居中方法：
利用line-height设为height的一样即可：
eg:
.div {
width：200px；
height: 200px;
line-height: 200px;
text-align:center;
font-size: 36px;
background-color: #ccc;
}
绝对定位居中
父容器元素：position: relative，子元素：position:absolute;
eg:
<div class="box">
<div class="content"></div>
</div>
<style>
.box{position:relative;width:200px;height:200px;background:#999;}
.content{
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:#C9F;}
</style>
效果如下所示：
学会这几种方法，css居中其实很简单
！注意：高度必须定义，建议加 overflow: auto，防止内容溢出。
flex居中
介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。
eg：
<div class="parent">
<div class="children">我是通过flex的水平垂直居中噢！</div>
</div>
<style>
.parent {
display:flex;
align-items: center;
justify-content: center;
width:200px;
height:200px;
background-color:green;
}
.children {
background-color:blue;
color:#FFF;
}
</style>
感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用CSS实行居中”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
