CSS实现垂直居中的方法

最新推荐文章于 2024-09-09 10:54:03 发布

前端开发小蜜蜂（诗语）

最新推荐文章于 2024-09-09 10:54:03 发布

阅读量335

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/web_harry/article/details/71436966

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS实现垂直居中的方法总结
先记下实现水平居中的方法：width+margin:

margin：0 auto;width:xxpx;

实现垂直居中的方法有：
1.绝对定位absolute结合margin属性实现：position:absolute;margin：auto;

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            height:250px;
            width: 300px;
            background-color: #27AE60;
            margin:auto;
            position: absolute;
            top: 0;
            bottom:0;
            right: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

有图有真相：

这里写图片描述

小结：绝对定位使元素脱离文档流渲染，使之根据top,left,bottom,right划定的容器内，能够实现margin的auto属性，即margin-top=margin-bottom，从而实现垂直居中。绝对定位的参照元素是设置了position属性的上级或者父元素，实在没有设置了position属性的上级，默认为body元素。

2.对单行文本实现垂直居中，只需要把line-height设置为对应元素对象的height就可以实现：

    .content{
        height:200px;
        width: 300px;
        background-color: #27AE60;
        line-height: 200px;
        text-align: center;
    }

有图有真相：

这里写图片描述

3.相对定位relative结合top、margin属性实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html,body {/*清除默认设置和滚动条*/
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .contener{
            margin:0 auto;
            background-color: #00a157;
            width: 300px;
            height:300px;
            position:relative;
            top:50%;
            margin-top:-150px;
        }
    </style>
</head>
<body>
    <div class="contener"></div>
</body>
</html>

有图有真相：

这里写图片描述

小结：相对定位relative使元素脱离文档流，根据设置的top，bottom,left,right属性相对自己原本位置进行偏移，这里top属性进行向下50%偏移，再利用margin-top属性设置负值，向上偏移自身高度的一半实现垂直居中。此外再利用margin：0 auto实现水平居中。

4.CSS3弹性布局（flex），设置父元素的display属性为flex即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      html,body{/*清除默认样式，防止滚动条*/
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
      }
      body{
          display: flex;
          align-items: center;/*垂直居中*/
          justify-content: center;/*水平居中*/
      }
        .content{
            height:200px;
            width: 300px;
            background-color: #27AE60;
        }
    </style>
</head>
<body>
       <div class="content"></div>
</body>
</html>

有图有真相：

这里写图片描述

5.display:inline-block结合：after占位实现

.content{
    text-align:center;
    background-color: #00acd6;
    width: 300px;
    height:300px;
}
.content span{
    vertical-align:middle;
    display:inline-block;
}
.content:after{
    content:'';
    width:0;
    height:100%;
    display:inline-block;
    vertical-align:middle;
}

<div class="content"><span>after样式实现垂直居中</span></div>

有图有真相：

这里写图片描述