CSS之排列系列--水平居中--方法/实例

深藏阁楼爱情的钟 2023-10-01 08:31 9阅读 0赞

原文网址：[CSS之排列系列--水平居中--方法/实例\_IT利刃出鞘的博客-CSDN博客][CSS_--_--_IT_-CSDN]

## 简介 ##

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

## 内联元素水平居中 ##

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

想要达到的效果：

![9753be420a534a928f60657c5f40f5b3.png][]

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

### 方案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"）水平居中。

想要达到的效果

![9753be420a534a928f60657c5f40f5b3.png][]

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

### 方案1：flex ###

**说明**

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

**代码**

<!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

**注意**

此法会导致子元素的子孙元素也会居中。如果不想让子元素的子孙元素也居中，可以设置子元素：text-align: initial;

**代码**

<!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>

[CSS_--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121733682
[9753be420a534a928f60657c5f40f5b3.png]: https://img-blog.csdnimg.cn/9753be420a534a928f60657c5f40f5b3.png