简介

本文介绍CSS中把元素水平居中的方法。

内联元素水平居中

需求：将div（class="container"）里的span（class="middle"）水平居中。

想要达到的效果：

CSS--水平居中--方法/实例_css

下边所有方案的结果都跟上图一样。

方案1：flex

说明

所有子元素居中：父元素设置display:flex，justify-content:center。


  • justify-content：控制主轴（横轴）上所有 flex 项目的对齐。
  • align-items：控制交叉轴（纵轴）上所有 flex 项目的对齐。
  • align-self：控制交叉轴（纵轴）上的单个 flex 项目的对齐。
  • align-content：控制“多条主轴（横轴）”的 flex 项目在交叉轴的对齐。

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container {
            display: flex;
            justify-content:center;
            background-color: #ffb91b;
        }

        .middle {
            background-color: #f974ff;
        }
    </style>
</head>

<body>

<div class="container">
    <span class="middle">中间</span>
</div>

</body>
</html>

方案2：text-align

简介

父元素要设置：text-align: center;

子元素要设置：margin: 0 auto。

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container {
            text-align: center;
            background-color: #ffb91b;
        }

        .middle {
            margin: 0 auto;
            background-color: #f974ff;
        }
    </style>
</head>

<body>

<div class="container">
    <span class="middle">中间</span>
</div>

</body>
</html>

方案3：绝对定位

简介

子元素设置：


  • position: relative;
  • top: 50%;
  • left: 50%;

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container {
            background-color: #ffb91b;
        }

        .middle {
            position: relative;
            top: 50%;
            left: 50%;
            background-color: #f974ff;
        }
    </style>
</head>

<body>

<div class="container">
    <span class="middle">中间</span>
</div>

</body>
</html>

块元素水平居中

需求：将div（class="container"）里的div（class="middle"）水平居中。

想要达到的效果

CSS--水平居中--方法/实例_css

下边所有方案的结果都跟上图一样。

方案1：flex

说明

所有子元素居中：父元素设置display:flex，justify-content:center。


  • justify-content：控制主轴（横轴）上所有 flex 项目的对齐。
  • align-items：控制交叉轴（纵轴）上所有 flex 项目的对齐。
  • align-self：控制交叉轴（纵轴）上的单个 flex 项目的对齐。
  • align-content：控制“多条主轴（横轴）”的 flex 项目在交叉轴的对齐。

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container {
            display:flex;
            justify-content:center;
            background-color: #ffb91b;
        }

        .middle {
            background-color: #f974ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="middle">中间</div>
</div>

</body>
</html>

方案2：text-align

简介

父元素：设置 text-align:center

子元素：设置 display: inline-block

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container {
            text-align: center;
            background-color: #ffb91b;
        }

        .middle {
            display: inline-block;
            background-color: #f974ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="middle">中间</div>
</div>

</body>
</html>

方案3：table

简介

给子元素设置display:table; margin:0 auto

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container {
            background-color: #ffb91b;
        }

        .middle {
            display: table;
            margin: 0 auto;
            background-color: #f974ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="middle">中间</div>
</div>

</body>
</html>