CSS水平居中大全
css的居中有很多情况，不同的情况方法不同，下面总结一下平常用到的居中方法
（1）文本，图片等行内元素的水平居中
给父元素设置text-align:center可以实现文本，图片等行内元素的水平居中，代码如下：
<style>
.wrap{text-align:center;background:#ccc;margin-bottom:10px;color:red;}
</style>
<div class="wrap">Hello word</div>
<div class="wrap"><img src="logo.jpg" height="129" width="238" alt="" /></div>
效果如下：
（2）确定宽度的块级元素的水平居中
确定宽度的块级元素的水平居中是通过设置margin-left：auto；margin-right:auto;来实现的，代码如下
<style>
.wrap{width:500px;height:100px;background:#ccc;}
.test{width:200px;height:50px;background:red;margin:0 auto;}
</style>
<div class="wrap"><div class="test"></div></div>
效果如下 ：
（3）不确定宽度的块级元素的水平居中
不确定宽度的块级元素的水平居中有三种实现方式，下面以分页为例子，因为分页的数量是不确定的 ，所以我们不能通过设置宽度来限制他的弹性。
方法一：
<style>
.wrap{background:red;}
ul,li{list-style:none;margin:0;padding:0;}
table{margin-left:auto;margin-right:auto;background:#ccc;}
.test li{float:left;display:inline;margin-right:5px;}
</style>
<div class="wrap">
<table>
<tbody>
<tr>
<th>
<ul class="test">
<li>1</li>
</ul>
</th>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>
<ul class="test">
<li>1</li>
<li>2</li>
</ul>
</th>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</th>
</tr>
</tbody>
</table>
</div>
效果如下：
方法一演示了分别有一个，两个，三个分页的情况下，分页模块都能居中的示例。ul标签是整个分页模块的根元素，它包含的li的数量不确定，所以ul本身的宽度也无法确定，所以不能通过固定宽度设置margin-left和margin-right:auto设置居中，这里用到了一个table来帮助实现不确定宽度的块级元素的水平居中，table有趣的地方是它本身不是块级元素，如果不给它设置宽度的话，它本身的宽度是通过内部元素“撑起”，即使不给它设置宽度，仅设置margin-left:auto, margin-right:auto 来实现居中，间接使ul居中了
方法二：
<style>
ul,li{list-style:none;margin:0;padding:0;}
.wrap{width:500px;height:100px;background:#ccc;}
.test{text-align:center;padding:5px;}
.test li{display:inline;padding-right:10px;}
</style>
<div class="wrap">
<ul class="test">
<li>1</li>
</ul>
<ul class="test">
<li>1</li>
<li>2</li>
</ul>
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
效果如下：
此方法的思路是改变块级元素为line类型，然后通过text-align:center来实现居中，比方法一简单，它的好处是不用添加无语义标签，简化了标签的嵌套深度，但也存在一定的问题：将块级元素转化为inline元素，行内元素比块级元素少一些功能，如设置长宽值，在某些特殊需要的css设置中，可能会带来一些限制。
方法三：
<style>
ul{list-style:none;margin:0;padding:0;}
.wrap{background:#ccc;width:500px;height:100px;}
.test{clear: both;float:left;padding-top:5px;position:relative;left:50%;}
.test li{position:relative;left:-50%;margin-right:5px;float:left;display:inline;}
</style>
<div class="wrap">
<ul class="test">
<li>1</li>
</ul>
<ul class="test">
<li>1</li>
<li>2</li>
</ul>
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
效果如下：
方法三的是给父元素设置float，然后父元素设置position:relative和left:50%; 子元素设置position:relative和left:-50%来实现水平居中，这种方法可以保留块级元素仍以display:block的形式显示，不会增加无语义标签。
希望本文对大家有所帮助。
本文转载自：迹忆客（https://www.jiyik.com）
以上是 CSS水平居中大全 的全部内容， 来源链接： utcz.com/z/290098.html
