本文主要是介绍CSS实现不同情况下的居中，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
看到影哥空间更新，留作收藏备用
1. 文本，图片等行内元素的居中(注意这里，父元素的宽度和高度都是已知的): 给父元素设置 text-align:center可保证水平居中, 设置line-height与父元素的height一样即可设置垂直居中中. 例程:
<style type="text/css"> .wrap{background:#000; width:500px;height:100px;margin-bottom:10px;color:#fff;text-align:center;line-height:100px;}
</style>
<div class="wrap">hello world</div>
2. 确定宽度的块级元素的水平居中: 通过设置margin-left:auto和margin-right:auto来实现.
<div class="wrap">hello world</div>
<style type="text/css">
.test{width:100px;margin-left:auto;margin-right:auto; background-color:grey;}
</style>
<div class="test">hello world</div>
3. 改变块级元素的display为inline类型，再设定 text-align来居中.
<style type="text/css">
.test{text-align:center;}
.test li{ display:inline; background-color:grey;}
</style>
<div class="wrap">
<ul class="test">
<li>abc</li>
<li>abc</li>
</ul>
</div>
这篇关于CSS实现不同情况下的居中的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
