HTML+CSS之设置元素的水平垂直居中

cloudOnSkyline

已于 2022-07-13 17:18:34 修改

阅读量978

点赞数

分类专栏： HTML和CSS 文章标签： html css

于 2022-07-04 17:21:15 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125604193

版权

HTML和CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文主要介绍如何利用HTML和CSS实现元素的水平垂直居中。

1.弹性布局（不换行）

justify-content:center：水平居中

align-items:center：垂直居中

  .father {
            display: flex;
            width: 500px;
            height: 500px;
            background-color: pink;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            margin-bottom: 50px;
        }

2.弹性布局（换行）

justify-content:水平居中

align-content:center:垂直居中

 .father1 {
            display: flex;
            width: 500px;
            height: 500px;
            background-color: pink;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            margin-bottom: 50px;
        }

3.定位（2D变化）

利用定位的top及left初步进行居中定位，发现会多偏移宽高的二分子一，通过translate向左和向上移动元素自身宽高的一半，即可实现垂直居中效果。

 .son2 {
            position: absolute;
            background-color: skyblue;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

4.定位（过度约束）

利用网页布局的过度约束原则（之前博客有过介绍）

.son3 {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

5.单元格布局（table-cell）

text-align:center:水平居中

vertical-align:middle:垂直居中

 .father4 {
            display: table-cell;
            width: 500px;
            height: 500px;
            background-color: pink;
            text-align: center;
            vertical-align: middle;
        }
        
        .son4 {
            display: inline-block;
        }

总体代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现水平垂直居中(子元素宽高无论有无与否,第四种子元素需要有宽高)</title>
    <style>
        /* 方式一 */
        
        .father {
            display: flex;
            width: 500px;
            height: 500px;
            background-color: pink;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            margin-bottom: 50px;
        }
        
        .son {
            background-color: skyblue;
        }
        /* 方式二 */
        
        .father1 {
            display: flex;
            width: 500px;
            height: 500px;
            background-color: pink;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            margin-bottom: 50px;
        }
        
        .son1 {
            background-color: skyblue;
        }
        /* 方式三 */
        
        .father2 {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            margin-bottom: 100px;
        }
        
        .son2 {
            position: absolute;
            background-color: skyblue;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        /* 方式四 */
        
        .father3 {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            margin-bottom: 200px;
        }
        
        .son3 {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        /* 方式五 */
        
        .father4 {
            display: table-cell;
            width: 500px;
            height: 500px;
            background-color: pink;
            text-align: center;
            vertical-align: middle;
        }
        
        .son4 {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">123</div>
        <div class="son">456</div>
        <div class="son">789</div>
    </div>
    <div class="father1">
        <div class="son1">人大由承心都，实就。</div>
    </div>
    <div class="father2">
        <div class="son2">范易头。dwdww</div>
    </div>
    <div class="father3">
        <div class="son3">啊承个嗣朋，承者想同服国，帅志。</div>
    </div>
    <div class="father4">
        <div class="son4">你治皇看久车书愚，智与都毒考自，高办才安，恶。</div>
    </div>
</body>

</html>

6.利用行内块及vertical-align属性

核心思路：子元素须设置为行内块模式，通过给父级添加text-align:center实现子元素的水平居中。

垂直居中需要设置一个宽度为0，高度与父级等高的盒子，需要转为行内块模式，同时设置vertical-align:middle.最后给子元素设置vertical-align:middle即可

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            width: 500px;
            margin: 0 auto;
            height: 300px;
            background-color: #1d6add;
            text-align: center;
        }
        
        div {
            width: 0;
            height: 300px;
            display: inline-block;
            vertical-align: middle;
        }
        
        img {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <header>
        <div></div>
        <img src="./imgs/1.png" alt="" width="300px">
    </header>
</body>

</html>

效果如图：