鼻屎炖蘑菇 发表于 2021-11-8 10:10:15

父级div高度自适应，如何使其中内容垂直居中

提问 因为编写的网页要实现不同屏幕自适应大小 所以div模块的大小都用百分比设置了 这样子情况下div块的大小高度都是未知的 我想实现将其中的文字居中显示 之前使用的是line-height设置高度加上具体大小px 但是现在父级元素的高度未知 在这种情况下 想实现块级元素里面的文字居中显示该如何实现呢？
            width: 10%;
            height: 100%;
            display: inline-block;
            text-decoration: none;
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 100%;
            background-color: black;
我的代码如下

kogawananari 发表于 2021-11-8 11:15:35

删除条目
line-height 和 text-align

修改条目
display: inline-flex;

增加条目
align-items: center;
justify-content: center;

Rydia 发表于 2021-11-8 11:21:56

<!DOCTYPE html>
<html>
<head>
<title>text</title>
<style>
    *{
      margin: 0;
      padding: 0;
    }

    #box{
      margin: 100px auto;
      height: 400px;
      width: 1200px;
      border: 1px solid aqua;
    }

    .inbox{
      display: inline-block;
      width: 10%;
      height: 100%;
      text-decoration: none;
      color: white;
      font-size: 100%;
      background-color: black;
      text-align: center;
    }

    .text{
      /* 使用定位和位移实现垂直居中 */
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

</style>
</head>
<body>
<!-- 父元素 -->
<div id="box">
    <!-- 子元素 -->
    <div class="inbox">
      <!-- 被垂直居中的部分 -->
      <p class="text">测试文本</p>
    </div>
</div>
</body>
</html>

大概就这样，还是有挺多方法的，我比较喜欢用上面这种{:10_316:}
页: [1]
查看完整版本: 父级div高度自适应，如何使其中内容垂直居中