CSS实现水平居中

以前要实现水平居中,用的最多的方法就是设定元素宽度,然后设定margin左右的值为auto。例如:

.center{
    width: 200px;
    margin: 0 auto;
}

12bet,使用这种方法必须设定元素宽度,但是很多时候我们不知道元素宽度,12bet,换句话说就是元素的宽度不是固定的,此时该怎么办呢?其实使用css实现水平居中的方式有多种,这里12博网址,以简单的分页列表为例来说明居中的方式:

这里12bet,讨论六种方案,如果大家还有其他方案,12博网址,欢迎大家提出来。

margin+width

See the Pen NPVGaL by superlin (@superlin) on CodePen.

此种方案在前面已有说明,效果如上。

优点:实现方法简单,兼容性好。

缺点:需要预知宽度,拓展性差。

inline-block

See the Pen EazVbj by superlin (@superlin) on CodePen.

仅仅是inline-block属性是无法让元素水平居中,只需要对父容器稍作修改,设置text-align: center就可以实现居中效果了。

12bet,优点:方法简单,容易理解。

缺点:要处理低版本ie的兼容性

兼容方式:(inline-block的前世今生)

display:inline-block; /* 现代浏览器 +IE6、7 inline 元素 */  
*display:inline; /* IE6、7 block 元素 */
*zoom:1;

float

See the Pen qEGOVN by superlin (@superlin) on CodePen.

浮动方案是比较难理解的,详细内容可以阅读Matthew James Taylor写的《Horizontally Centered Menus with no CSS hacks》一文。

.pagination {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.pagination ul {
  clear: left;
  float: left;
  position: relative;
  left: 50%;/*整个分页向右边移动宽度的50%*/
}
.pagination li {
  display: block;
  float: left;
  position: relative;
  right: 50%;/*将每个分页项向左边移动宽度的50%*/
}

这里简单介绍一下主要步骤:

没有浮动的div:可以看到宽度为100%。

centered menus non floated div

向左边浮动的div:宽度由div中的内容决定(除非显示设置宽度)。

centered menus left floated div

标准左对齐的菜单:使用浮动将导航浮动到左边,每个分页项也浮动。

centered menus left tabs

向右移动ul:设置ul的position:relative属性,并且向右移动50%(left: 50%)。

centered menus shifted tabs

向左移动ul中的所有li:在li上也设置position:relative属性,同时向左移动50%(right: 50%)。

centered menus centered tabs

通过以上步骤就可以达到我们想要的效果了。

优点:兼容性强,扩展性也比较好;

缺点:实现原理较复杂。

绝对定位

See the Pen myYeqB by superlin (@superlin) on CodePen.

这种方案实际是浮动方案的修改版。

.pagination {
  position: relative;
}
.pagination ul {
  position: absolute;
  left: 50%;
}
.pagination li {
  float: left;
  position: relative;/*注意,这里不能是absolute*/
  right: 50%;
}

优点:扩展性强,兼容性强;

缺点:理解性难。

CSS3的flex

See the Pen XJwmVW by superlin (@superlin) on CodePen.

css3的flex布局是一个十分强大的功能,可以实现十分灵活多变的布局,对于flex布局的请看参考中的链接。

.pagination {
  /*一堆兼容代码请看源码*/
  display: box;
  box-orient: horizontal;
  box-pack: center;
}
.pagination li {
  float: left;
}

优点:实现便捷,扩展性强

缺点:兼容性差。

CSS3的fit-content

See the Pen xbNwpZ by superlin (@superlin) on CodePen.

“fit-content”是“width”属性新加的一个属性值,配合margin可以让我轻松的实现水平居中的效果。关于fit-content的请看参考中的链接。

.pagination ul {
  /*fit-content的兼容代码看源码*/
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.pagination li {
  float: left;
}

优点:简单易懂,扩展性强;

缺点:浏览器兼容性差

参考

Author image
关于 superlin
Beijing, CN 主页
The reason why a great man is great is that he resolves to be a great man.
 
 
默认颜色 边栏居左 边栏居右