CSS实现文字悬浮在图片中间位置的样式效果

我们在设计网页的时候，是不是有看到文字附着在图片的中间。常规简单的办法就是直接将图片上打上文字，但是这样每次修改就显得麻烦。于是，我们可以尝试用定位的方式将文字部分便宜到图片中间的位置。

最终实现的效果就这样子。

CSS样式部分：

.bannertop .site-center-text{
  position:absolute;
  z-index:1;
  text-align: center;
  top:300px;
}

.bannertop .site-center-text>p{
  font-size: 24px;
  color:#fff;
}
.sitetitle{font-size: 80px;color: #FFF;}
.sitedescription{color: #fff;opacity: .8;margin-top: 100px;}
@media screen and (max-width: 600px) { .wp-none{display:none; }}

我们可以看到，我还用到wp-none的样式可以设定在移动端隐藏。

<div class="bannertop">
  <img class="banner-img" src="cropped-shutterstock_1246744045-scaled-1.jpg"> 
<div class="site-center-text">
      
      
              <h1 class="sitetitle wp-none">MM-Offshore</h1>
      
              <p class="sitedescription wp-none">The company MM-Offshore GmbH is one of the major designing and producing ship’s equipment supplier in the international shipbuilding market.</p>
          </div>
</div>

这样HTML的部分。

本文出处：老蒋部落 » CSS实现文字悬浮在图片中间位置的样式效果 | 欢迎分享（ 公众号：老蒋朋友圈 ）