行内元素行内块元素块级元素在父元素中水平垂直居中

最新推荐文章于 2023-03-09 00:21:56 发布

Sabrina-n

最新推荐文章于 2023-03-09 00:21:56 发布

阅读量294

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/Sabrina4324/article/details/120535128

版权

设置行内元素、行内块元素水平垂直居中

把行内快元素、行内元素当做文本，在父元素中设置

  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;

      /* 行内块水平垂直居中 */
      text-align: center;
      /* 等于父元素的高 */
      line-height: 200px;
    }

    .box .hangneik {
      display: inline-block;
    }
  </style>
</head>

<body>
  <!-- 行内块元素在父元素水平垂直居中 -->
  <div class="box">
    <div class="hangneik">这是行内快元素</div>
  </div>
</body>

块元素水平垂直居中

方案一

<style>
    body {
      height: 1000px;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 块元素水平居中 */
      margin: auto;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
    }
  </style>
</head>

<body>
  <!-- 块元素在父元素水平垂直居中 -->
  <div class="box"></div>
</body>dy>

2.方案二

<style>
    body {
      height: 1000px;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -100px;
      margin-left: -100px;
    }
  </style>
</head>

<body>
  <!-- 块元素在父元素水平垂直居中 -->
  <div class="box"></div>
</body>

3.方案三

 <style>
    body {
      height: 1000px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;

    }
  </style>
</head>

<body>
  <!-- 块元素在父元素水平垂直居中 -->
  <div class="box"></div>
</body>