《Web开发中让盒子居中的几种方法》-html tutorial-php.cn

一、记录下几种盒子居中的方法：

1.0、margin固定宽高居中；

2.0、负margin居中；

3.0、绝对定位居中；

4.0、table-cell居中；

5.0、flex居中；

6.0、transform居中；

7.0、不确定宽高居中(绝对定位百分数)；

8.0、button居中。

二、代码演示(html使用同一个Demo)：

html Demo：

<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></span></span></span>

Salin selepas log masuk

1.0、margin固定宽高居中(演示)

这种定位方法纯粹是靠宽高和margin拼出来的，不是很灵活。

CSS：

<span style="color: #800000;">#container </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #000</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>;
}<span style="color: #800000;">
#box </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 150px 200px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #0ff</span>;
}

Salin selepas log masuk

2.0、负margin居中(演示)

利用负的margin来进行居中，需要知道固定宽高，限制比较大。

CSS:

<span style="color: #800000;">#container </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #000</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>;
}<span style="color: #800000;">
#box </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> -100px -100px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #0ff</span>;
}

Salin selepas log masuk

3.0、绝对定位居中(演示)

利用绝对定位居中，非常常用的一种方法。

CSS:

<span style="color: #800000;">#container </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #000</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>;
}<span style="color: #800000;">
#box </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #0ff</span>;
}

Salin selepas log masuk

4.0、table-cell居中(演示)

利用table-cell来控制垂直居中。

CSS:

<span style="color: #800000;">#container </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table-cell</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> middle</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #000</span>;
}<span style="color: #800000;">
#box </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #0ff</span>;
}

Salin selepas log masuk

5.0、flex居中(演示)

CSS3中引入的新布局方式，比较好用。缺点：IE9以及IE9一下不兼容。

CSS:

<span style="color: #800000;">#container </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> -webkit-flex</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> flex</span>;<span style="color: #ff0000;">
    -webkit-align-items</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
            align-items</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    -webkit-justify-content</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
            justify-content</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #000</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>;
}<span style="color: #800000;">
#box </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #0ff</span>;
}

Salin selepas log masuk

6.0、transform居中(演示)

这种方法灵活运用CSS中transform属性，较为新奇。缺点是IE9下不兼容。

CSS:

<span style="color: #800000;">#container </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #000</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>;
}<span style="color: #800000;">
#box </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(-50%, -50%)</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> translate(-50%, -50%)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> translate(-50%, -50%)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> translate(-50%, -50%)</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #0ff</span>;
}

Salin selepas log masuk

7.0、不确定宽高居中(绝对定位百分数)(演示)

这种不确定宽高的居中，较为灵活。只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。

CSS:

<span style="color: #800000;">#container </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #000</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>;
}<span style="color: #800000;">
#box </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 30%</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 30%</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 25%</span>;<span style="color: #ff0000;">
    bottom</span>:<span style="color: #0000ff;"> 25%</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #0ff</span>;
}

Salin selepas log masuk

8.0、button居中(演示)

利用button做外容器，里边的块元素会自动垂直居中，只需要控制一下水平居中就可以达到效果。

HTML：

<span style="color: #0000ff;"><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span></span></span>

Salin selepas log masuk

CSS：

<span style="color: #800000;">button </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #000</span>;
}<span style="color: #800000;">
div </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #0ff</span>;
}

Salin selepas log masuk