如何实现元素垂直居中？Bootstrap环境下p元素居中失效求助

嗨，我来帮你搞定这个垂直居中的小问题～你现在的代码没生效，核心原因是**top: 50%这个属性只对非static定位的元素生效**，而<p>元素默认是position: static，所以top属性根本起不了作用，transform自然也达不到垂直居中的效果。

既然你在用Bootstrap 4，其实用框架自带的flex工具类就能轻松解决，不用额外写复杂的CSS，给你两个可行方案：

方案一：用Bootstrap内置的flex工具类（推荐） #

你已经在header和内部div用了d-flex，只需要给包含img和p的那个div加上align-items-center类，就能让里面的元素垂直居中了，这是最贴合Bootstrap设计思路的做法：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <!-- 原p元素的自定义样式可以去掉了 -->
</head>
<body>
  <header class="d-flex flex-column align-content-center bg-secondary py-5">
    <!-- 给这个div添加align-items-center类 -->
    <div class="d-flex align-items-center">
      <img src="img/Icons-14.png">
      <p>hgjsafakfjlajflksjf</p>
    </div>
  </header>
</body>
</html>

方案二：自定义CSS（如果一定要用transform的方式） #

如果你坚持想用自己写的CSS来实现，那必须给<p>元素设置非static的定位，比如position: relative，同时确保父元素布局支持这种居中方式，不过这种方式不如方案一简洁：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <style>
    p{
      position: relative; /* 关键：添加非static定位 */
      top: 50%;
      transform: translateY(-50%);
    }
    /* 若父div有固定高度，也可改用absolute定位（需父元素设position: relative）：
    .d-flex {
      position: relative;
    }
    p{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    } */
  </style>
</head>
<body>
  <header class="d-flex flex-column align-content-center bg-secondary py-5">
    <div class="d-flex">
      <img src="img/Icons-14.png">
      <p>hgjsafakfjlajflksjf</p>
    </div>
  </header>
</body>
</html>

个人强烈推荐方案一，毕竟用Bootstrap的核心就是利用它的工具类快速布局，减少自定义CSS的工作量，也更易维护～

内容的提问来源于stack exchange，提问作者Krish