div适应屏幕垂直居中的多种解决方案

最新推荐文章于 2023-01-11 19:04:11 发布

一枚币

最新推荐文章于 2023-01-11 19:04:11 发布

阅读量2.8k

点赞数 2

本文链接：https://blog.csdn.net/qq_41063734/article/details/81028799

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;font-size: 20px}
        /*方法一 div使用绝对布局 position:absolute; top left right button的值一样,不一定都为0;margin:auto;*/
        .main{
            width: 200px;
            height: 200px;
            background-color: #00b7ee;
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom:0;
            margin: auto;
            text-align: center;
            line-height: 180px;
        }
        /*方法二 绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了*/
        .main{
            width: 200px;
            height: 200px;
            background-color: #00b7ee;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
            line-height: 180px;
        }
        /*方法三 绝对布局，让left和top都是50%，margin: -100px 0 0 -100px;*/
       .main{
           width: 200px;
           height: 200px;
           background-color: #00b7ee;
           position: absolute;
           top:50%;
           left: 50%;
           margin: -100px 0 0 -100px;
           text-align: center;
           line-height: 180px;
       }
        /*方法四  flex布局*/
       body{
           width: 100%;
           height: 100vh;/**屏幕高度百分百*/
            display: flex;
            align-items:center;
            justify-content:center;
        }
        .main{
            border: 1px solid #0000FF;
            height: 200px;
            width: 400px;
            display: flex;
            align-items:center;
            justify-content:center;
        }
   </style>
</head>
<body>
  <div class="main">
    <h1 class="h11">MAIN</h1>
  </div>
</body>
</html>

图片文字并列时候垂直居中

img{vertical-align:middle}

text{vertical-align:middle}