垂直居中的四种方法

今天我们来学习一下如何使一个盒子垂直居中的四种方法。

• 第一种方法：

 <!-- 方法一 -->
    <div class="con1">
        方块1
    </div>

对应的样式为：

.con1{
            position: absolute;
            /* 设置元素的定位位置，距离上下左右都为0 */
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            height:600px;
            width:600px;
            color:#000;
            background-color: aquamarine;
        }

效果图如图1所示。

图1.png

• 第二种方法

 <!-- 方法二 -->
<div class="con2">
        方块2
    </div>

对应的样式为：

.con2{
            position: absolute;
            /* 设置元素的定位位置，距离上、左都为50% */
            top:50%;
            left:50%;
            /* 设置元素的左外边距、上外边距为宽高的负1/2 */
            margin-left: -200px;
            margin-top:-200px;
            width:400px;
            height: 400px;
            color:#000;
            background-color: blueviolet;
        }

效果图如图2所示。

图2.png

• 第三种方法

  <div class="con3">
        方块3
    </div>

对应的样式为：

.con3{
            position: absolute;
            top:50%;
            left:50%;
            /* 设置元素的相对于自身的偏移度为负50%（也就是元素自身尺寸的一半）*/
            transform:translate(-50%,-50%);
            width: 200px;
            height: 200px;
            color:#000;
            background-color:burlywood;
        }

效果图如图3所示。

图3.png

• 第四种方法

 <!-- 方法四 -->
     <div id="con">
        <div class="con4">
            方块四
        </div>
    </div>

对应的样式为：

  #con{
            display: flex;
            justify-content: center;
            align-items: center;
            width:100vw;
            height:100vh;
        }
        #con .con4{
            width:100px;
            height:100px;
            background-color: red;
        }

效果图如图4所示。

图4.png

好了，接下来放上所有的效果图。

所有的效果图集合.png

好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

小晴天