元素内的行内元素
在元素上加
text-align:center;
宽度固定的块级元素
在元素上加
width: 宽度值;
margin-left: auto;
margin-right: auto;
或者用绝对定位
position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);
宽度不固定的块级元素
方法1
用display:inline-block
。通过以下几个步骤
- 元素设置
text-align:center;
- 元素设置
font-size:0;
。这样做是为了去除子元素间的空格的占位 - 子元素设置
display:inline-block;
方法2
需要通过以下几个步骤
- 让元素的宽度变为所包含元素的内容。可以用浮动或绝对定位。
- 元素向左移动其父级元素宽度的50%
- 子元素向左移动其父级元素宽度的50%
例如,有如下的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特性来做居中时,要注意下兼容性。
详细描述和更多实现见六种实现元素水平居中