H5C3__元素垂直居中的方法

骑猪看日落 2023-07-03 12:20 1阅读 0赞

在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素， 就对它的父元素应用 text-align:center; 如果它是一个块级元素，就对它自身应用 margin:auto。还有没有其他的方法呢，我们需要从一下两个方面来讨论：

1.  **文本垂直居中的方法**
2.  **块级元素垂直居中的方法**

## **1.文本垂直居中的方法** ##

文本垂直居中主要分为单行文本和多行文本居中两种。

**    A.单行文本垂直居中**

1.方法：line-height=height （只需父级元素设置此代码即可，较简单，不再赘述）

2.方法：父级元素设置display:table; 子元素设置display:table-cell,并且设置vertical-align:middle.

案例1：单行文本垂直居中：display:table;+display:table-cell+vertical-align:middle;

<div class="box">
            <p class="p">项目实战中单行文本居中</p>
        </div>

样式文件

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70][]

**          B.多行文本垂直居中**

1. 方法 ： display:table;+display:table-cell+vertical-align:middle; （使用方法同上）

2.方法 ： display:inline-block;+display:inline-block;+vertical-align:middle;

案例2：多行文本垂直居中

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>元素垂直居中的探究</title>
        <style>
            *{
                margin: 0;
            }
            .box1{
                width: 500px;
                height: 500px;
                margin: 50px auto;
                border: 1px solid #000;
                text-align: center; /*水平居中*/
            }
            .p1{
                display: inline-block; /*p1具有行内块*/
                vertical-align: middle; /*垂直居中*/
            }
            span{
                display: inline-block; /*行内块*/
                height: 100%;
                border: 1px solid #000;
                vertical-align: middle;/*垂直居中*/
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <p class="p1">项目实战中单行文本居中 <br> 项目实战中多行文本居中 <br>项目实战中多行文本居中</p>
            <span></span>
        </div>
    </body>
    </html>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70 1][]

## 2.块级元素垂直居中 ##

a.子绝父相定位与边距负值

b.内边距操作

c.绝对定位与外间距自动操作

d.浮动盒子

e.Flex布局

案例3：块元素居中的各种方法

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
    
            .wrap{
                width: 500px;
                height: 500px;
                margin: 50px auto;
                background: #000;
    
            }
            .sub{
                width: 200px;
                height: 200px;
                background: #00a080;
            }
          /*  a.子绝父相定位与边距负值*/
            .wrap1{
                position: relative;
                width: 500px;
                height: 500px;
                margin: 50px auto;
                background: #000;
    
            }
            .sub1{
                position: absolute;
                top: 50%;
                left: 50%;         /*通过设置top和left:50%，会使子元素左上顶点与父级元素中心点重合 */
                margin: -100px 0 0 -100px; /*子元素宽度的一半*/
                width: 200px;
                height: 200px;
                background: #00a080;
            }
           /* b.	内边距操作
                 父元素设置box-sizing: border-box;
                 padding设置为（父级元素宽-子元素宽）/2
           */
            .wrap2{
                width: 500px;
                height: 500px;
                margin: 50px auto;
                background: #000;
                padding: 150px;          /* 通过设置父级盒模型宽度计算方式，及padding可以实现块级元素居中*/
                box-sizing: border-box;
            }
            .sub2{
                width: 200px;
                height: 200px;
                background: #00a080;
            }
            /*
            c.	绝对定位与外间距自动操作
               这种方式不常用*/
            .wrap3{
                position: relative;
                width: 500px;
                height: 500px;
                margin: 50px auto;
                background: #000;
    
            }
            .sub3{
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                width: 200px;
                height: 200px;
                background: #00a080;
            }
            /* d.浮动盒子*/
            .wrap4{
                width: 500px;
                height: 500px;
                margin: 50px auto;
                background: #000;
    
            }
            .floater{
                float: left;
                width: 100%;
                height: 50%;
                margin-bottom: -100px;/*下方元素宽度的一半*/
                border: 1px solid #fff;
            }
            .sub4{
                clear: both;
                margin: 0 auto;/*水平居中*/
                width: 200px;
                height: 200px;
                background: #00a080;
            }
         /*  e. flex布局
                因为涉及到兼容性问题，在pc端用的较少一些
                移动端，flex布局居中是很好的选择
         */
            .wrap5{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 500px;
                height: 500px;
                margin: 50px auto;
                background: #000;
            }
            .sub5{
                width: 200px;
                height: 200px;
                background: #00a080;
            }
            /*图片垂直居中显示*/
            .wrap6{
                width: 500px;
                height: 500px;
                margin: 50px auto;
                border: 1px solid red;
                line-height: 500px;
                text-align: center;
            }
            .wrap6>img {
                width: 200px;
                vertical-align: middle;
            }
        </style>
    
    </head>
    <body>
        <div class="wrap">
            <div class="sub"></div>
        </div>
        <div class="wrap1">
            <div class="sub1">
            </div>
        </div>
        <div class="wrap2">
            <div class="sub2">
            </div>
        </div>
        <div class="wrap3">
            <div class="sub3">
            </div>
        </div>
        <div class="wrap4">
            <div class="floater"></div>
            <div class="sub4">
            </div>
        </div>
        <div class="wrap5">
            <div class="sub5">
            </div>
        </div>
        <div class="wrap6">
            <img src="img/cont2.png" alt="">
        </div>
    </body>
    </html>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200206193900369.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200206193649231.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020020620054538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4=,size_16,color_FFFFFF,t_70