垂直居中的四种方法

程序员文章站 2022-06-15 17:13:27

...

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

第一种方法：

 <!-- 方法一 -->
    <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所示。