CSS之排列系列--垂直居中--方法/实例

灰太狼 2023-10-01 08:32 7阅读 0赞

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

## 简介 ##

**说明**

本文用示例介绍CSS将子元素垂直居中的方法。

**需求**

将div（class="container"）里的span（class="middle"）垂直居中。

## 方案1：flex ##

**简介**

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

单个子元素居中：父元素设置 display:flex；子元素设置 align-self: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 {
                height: 400px;
                display: flex;
                align-items:center;
                background-color: #ffb91b;
            }
    
            .middle {
                background-color: #f974ff;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <span class="middle">中间</span>
    </div>
    
    </body>
    </html>

**代码（单独设置子元素）**

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            html, body {
                margin: 0; /*若不设置，默认为8px*/
            }
    
            .container {
                height: 400px;
                display: flex;
                background-color: #ffb91b;
            }
    
            .middle {
                align-self: center;
                background-color: #f974ff;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <span class="middle">中间</span>
    </div>
    
    </body>
    </html>

上边两种方式的结果都是：

![cb0d7c74aa504d32a20d9c1dc69b87ab.png][]

## 方案2：绝对定位 ##

**简介**

父元素

*  position: relative;

子元素：

*  position: absolute;
 *  top: 50%;
    
     *  子盒子左上角在父盒子中心
 *  transform: translate(0, -50%);
    
     *  将子盒子向上移动自身高度的50%

**代码（子盒子左上角在父盒子中心）**

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            html, body {
                margin: 0; /*若不设置，默认为8px*/
            }
    
            .container {
                height: 400px;
                position: relative;
                background-color: #ffb91b;
            }
    
            .middle {
                position: absolute;
                /*子盒子左上角在父盒子中心*/
                top: 50%;
                background-color: #f974ff;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <span class="middle">中间</span>
    </div>
    
    </body>
    </html>

结果（子盒子左上角在父盒子中心）

![fff6c2b1fbc1420c9ce7d8163d95af78.png][]

**代码（子盒子中心在父盒子中心）**

上边的写法稍微向下偏了一点点，本处进行纠正

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            html, body {
                margin: 0; /*若不设置，默认为8px*/
            }
    
            .container {
                height: 400px;
                position: relative;
                background-color: #ffb91b;
            }
    
            .middle {
                position: absolute;
                top: 50%;
                transform: translate(0, -50%);
                background-color: #f974ff;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <span class="middle">中间</span>
    </div>
    
    </body>
    </html>

结果

![590821bb0c7e4db3bd2615b148cbbc04.png][]

## 方案3：table ##

**简介**

父元素：设置 display: table-cell; vertical-align: middle;  
子元素：设置 margin: auto;

**代码**

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            html, body {
                margin: 0; /*若不设置，默认为8px*/
            }
    
            .container {
                height: 400px;
                display: table-cell;
                vertical-align: middle;
                background-color: #ffb91b;
            }
    
            .middle {
                margin: auto;
                background-color: #f974ff;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <span class="middle">中间</span>
    </div>
    
    </body>
    </html>

结果

![7c0f2c12395940c7bb39e4dd96279d16.png][]

[CSS_--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121737727
[cb0d7c74aa504d32a20d9c1dc69b87ab.png]: https://img-blog.csdnimg.cn/cb0d7c74aa504d32a20d9c1dc69b87ab.png
[fff6c2b1fbc1420c9ce7d8163d95af78.png]: https://img-blog.csdnimg.cn/fff6c2b1fbc1420c9ce7d8163d95af78.png
[590821bb0c7e4db3bd2615b148cbbc04.png]: https://img-blog.csdnimg.cn/590821bb0c7e4db3bd2615b148cbbc04.png
[7c0f2c12395940c7bb39e4dd96279d16.png]: https://img-blog.csdnimg.cn/7c0f2c12395940c7bb39e4dd96279d16.png