Question

我只是试图将我的bg文本放在外部div中，因此在背景中有一张图片，所有设备的中心都有h1标签。我最初有这个边缘顶部是一个固定的像素。我需要它是一个百分比，所以它保持在中心。但是，当我用百分比替换边缘顶部时，作为最小化我的屏幕，h1元素将向上滑动。我希望它能保持优势：始终保持50％的背景图片。

HTML

dart:html

CSS

  <div class= 'bg'>
      <div class='bg-text'>
        <h1>Text</h1>
      </div>
    </div>

Answer 1

使用flex属性将内部div对齐在中心

.bg {
  display: flex; 
  align-items:center;
  width: 100%;
  height: 300px;
  background-image: url('pic.jpg');
  background-attachment: scroll;
  background-color: red;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.bg-text{
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 12px rgba(0,0,0,0.5);
}

.bg-text h1{
    font-size: 50px;
    font-weight: 700;
}

看看这里 https://jsfiddle.net/pteus556/

支持浏览器。

Answer 2

潜在的第二种方法是使用transform: translateY(-50%);。看看小提琴的小提琴：https://jsfiddle.net/y58hu6tv/2/。

.bg {
    width: 100%;
    height: 500px;
    background-color: rgba(0, 0, 0, .7);
}

.bg-text {
   position: relative;
   top: 50%;
   margin: 0 auto;
   transform: translateY(-50%);
   text-align: center;
   background-color: rgba(255, 255, 255, .7);
}

再次使用这种技术，浏览器支持也是如此。

参考：http://caniuse.com/#feat=transforms2d

Answer 3

使用<div>创建 fixed dimensions并将背景添加到其中。
根据您的需要调整<div>的尺寸。
将您的文字置于 <div>
将文字置于 <div>内并将其position:absolute - 与其父级相关
使用transform属性以及top / left / right / bottom

＆＃13;

.mycontent {
  width: 100vw;
  max-width: 100%;
}
.mytext {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background: rgba(255, 255, 255, .6);
  border: 1px solid #777;
  padding: .2em;
  color: #000;
}
.topcontent {
  height: 100vh;
  width: 2560px;
  max-width: 100%;
  background: url(http://supersocl.com/wp-content/uploads/2016/09/2560X1440-Wallpaper-Elegant-6G0.jpg);
  background-size: cover;
}
.othercontent {
  background: #010101;
  padding: 30px;
}
body {
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
  color: #999;
}
p {
  margin: 0 auto;
  padding: 20px;
  text-align: justify;
  text-justify: inter-word;
}

＆＃13;

<body>
  <div class="mycontent">
    <div class="topcontent">
      <span class="mytext">your text goes here</span>
    </div>
    <div class="othercontent">
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

      <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
        ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>

      <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
        assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et vo</p>
    </div>
  </div>
</body>

＆＃13;

如何使用背景图像垂直居中div中的div

3 个答案: