在元素上加
text-align:center;
在元素上加
width: 宽度值;
margin-left: auto;
margin-right: auto;
或者用绝对定位
position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);
用display:inline-block
。通过以下几个步骤
text-align:center;
font-size:0;
。这样做是为了去除子元素间的空格的占位display:inline-block;
需要通过以下几个步骤
例如,有如下的HTML结构
<ul id="no-sure-width-2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
样式为
#no-sure-width-2 {
list-style: none;
position: absolute;
left: 50%;
/* 用下面的两个样式 和使用 position: absolute;是等效的。本质上都是让元素的宽度变为所包含元素的宽度 */
/*float:left;
position: relative;*/
}
#no-sure-width-2>li {
float: left;
position: relative;
left: -50%;
/*right: 50%;*/ /*left -50%和right 50% 是等价的*/
/*将每个分页项向左移动父元素宽度的50%*/
background-color: #ddd;
color: #fff;
width: 20px;
height: 24px;
line-height: 24px;
text-align: center;
}
上面介绍的方法都是浏览器兼容性比较好的。兼容IE8+,Chrome,Firefox等。
还可以使用CSS3的flexbox,transform等方式来实现水平居中。但使用这些CSS3特性来做居中时,要注意下兼容性。
详细描述和更多实现见六种实现元素水平居中