常用的css垂直居中方法

编程小橙子
676 阅读4分钟

方式一：通过display:flex实现CSS垂直居中

  • 给父元素设置display: flex;
  • 接着给子元素设置align-self: center;

先看效果图

具体看代码演示

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!--父元素-->
    <div id="max-box">
        <!--子元素-->
        <div id="min-box">
            
        </div>
    </div>
</body>
</html>

css

#max-box{
    width: 500px;
    height: 500px;
    background: orangered;
    display: flex;  /*父元素为display: flex;*/
}
#max-box>#min-box{
    width: 50%;
    height: 50%;
    background: #bbb;
    align-self: center;  /*子元素align-self: center;*/
}

方式二：通过伪元素:before实现CSS垂直居中

  • 父元素添加伪元素:before
  • 让子元素实现垂直居中

先看效果图

具体看代码演示

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="max-box">
        <div id="min-box">
            
        </div>
    </div>
</body>
</html>

css

#max-box{
    width: 500px;
    height: 500px;
    background: orangered;
}
<!--主要代码-->
#max-box:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
#max-box>#min-box{
    width: 50%;
    height: 50%;
    background: #bbb; 
    display: inline-block;
    vertical-align: middle;
}

方式三：通过隐藏节点实现CSS垂直居中

  • 创建一个隐藏节点
  • 使得隐藏节点的height值为剩余高度的一半

先看效果图

具体看代码演示

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="max-box">
        <!-- 节点 -->
        <div id="center-tic"></div>
        <div id="min-box">

        </div>
    </div>
</body>
</html>

css

#max-box{
    background: orangered;
    width: 500px;
    height: 500px;
    display: table;
}
#max-box>#center-tic{
    width: 50%;
    height: 25%;  /*高度为剩余高度的一半*/
}
#max-box>#min-box{
    width: 50%;
    height: 50%;
    background: #bbb; 
}

方式四：已知父元素高度通过transform实现CSS垂直居中

  • 给子元素设置position:relative
  • 通过translateY即可定位到垂直居中的位置

先看效果图

具体看代码演示

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="max-box">
        <div id="min-box">
        </div>
    </div>
</body>
</html>

css

#max-box{
    background: orangered;
    width: 500px;
    height: 500px;
}

#max-box>#min-box{
    width: 50%;
    height: 50%;
    background: #bbb; 
    /* 主要是下面这三行代码 */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

方式五：未知父元素高度通过transform实现CSS垂直居中

  • 给子元素设置position: absolute;
  • 给父元素设置position: relative;
  • 通过translateY即可定位到垂直居中的位置

先看效果图

具体看代码演示

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="max-box">
        <div id="min-box">
        </div>
    </div>
</body>
</html>

css

#max-box{
    background: orangered;
    width: 500px;
    height: 500px;
    position: relative;  /*父元素*/
}

#max-box>#min-box{
    width: 50%;
    height: 50%;
    background: #bbb; 
    /* 主要是下面这三行代码 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

方式六：通过行高实现CSS垂直居中

  • 父元素的高度加入为500px;
  • 子元素的行高等于父元素的高度

先看效果图

具体看代码演示

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="max-box">
        <div id="min-box">
        我是居中的
        </div>
    </div>
</body>
</html>

css

#max-box{
    background: orangered;
    width: 500px;
    height: 500px;
}

#max-box>#min-box{
    width: 50%;
    height: 50%;
    line-height: 500px;
}

以上就是css垂直居中的方式，还要其他方式后期进行更新，喜欢的小伙伴加关注，点点赞支持下，后续还会不断更新丰富的内容

avatar
文章
阅读
粉丝