垂直居中的方法

最新推荐文章于 2024-09-06 00:25:45 发布

唯爱赞多

最新推荐文章于 2024-09-06 00:25:45 发布

阅读量74

点赞数

分类专栏：前端面试文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_47003395/article/details/120079660

版权

前端面试专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文介绍了四种实现网页元素垂直居中的方法：1) 使用`margin:auto`结合绝对定位；2) 利用`margin`负值进行偏移调整；3) 通过`table-cell`布局实现；4) 使用`flexbox`弹性布局。每种方法都有其适用场景，详细解析了代码实现过程。

摘要由CSDN通过智能技术生成

margin:auto
margin为负值
table-cell(未脱离文档流)
flex

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直居中</title>
  <style>
    /* margin:auto */
    /* div{
      width: 400px;
      height: 400px;
      position: relative;
      border: 1px solid #e67d38;
    }
    img{
      width: 300px;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    } */
    /* margin负值 */
    /* .container{
      width: 500px;
      height: 400px;
      border: 2px solid #379;
      position: relative;
    }
    .inner{
      width: 480px;
      height: 380px;
      background-color: #746;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -190px;
      margin-left: -240px;
    } */
    /* table-cell 未脱离文档流 */
    /* div{
      width: 300px;
      height: 300px;
      border: 3px solid #555;

      display: table-cell;
      vertical-align: middle;

      text-align: center;
    }
    img{
      width: 200px;
      vertical-align: middle;
    } */
    /* flex */
    .container{
      widht: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items:center;
      align-items: center;
      -webkit-justify-content:center;
      justify-content: center;
    }
    .inner{
      border: 3px solid #458761;
      padding: 20px;
    }
  </style>
</head>
<body>
  <!-- <div>
    <img src="1.png" alt="">
  </div> -->
  <!-- <div class="container">
    <div class="inner"></div>
  </div> -->
  <!-- <div>
    <img src="1.png" alt="">
  </div> -->
  <div class="container">
    <div class="inner"></div>
  </div>
</body>
</html>