Question

我正在使用此代码显示一个背景图像，该图像占据浏览器的完整垂直高度。

<div id="outer"></div>

CSS

#outer {
  background-image: url(https://www.mydomain./image.jpg);
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
}

我希望在内部放置一个div，它在图像中间垂直和水平居中，适用于所有屏幕分辨率。

到目前为止，我尝试过的所有内容都没有成功。这需要大多数浏览器支持。

Answer 1

为内部%O设置<?php if($_POST['Date'] == 'Date') { ?> <th style="border: 1px solid #333333; height: 20px; background: #9999E6;font-weight: bold;">Date / Hour</th> <?php if($_POST['Ingress'] == 'Ingress') { ?> <th style="border: 1px solid #333333; height: 20px; background: #9999E6;font-weight: bold;">Ingress</th> <?php if($_POST['Egress'] == 'Egress') { ?> <th style="border: 1px solid #333333; height: 20px; background: #9999E6;font-weight: bold;">Egress</th> <?php if($_POST['Attempts'] == 'Attempts') { ?> <th style="border: 1px solid #333333; height: 20px; background: #9999E6;font-weight: bold;">Attempts</th> <?php if($_POST['ASR'] == 'ASR') { ?> <th style="border: 1px solid #333333; height: 20px; background: #9999E6;font-weight: bold;">ASR</th> <?php if($_POST['ACD'] == 'ACD') { ?> <th style="border: 1px solid #333333; height: 20px; background: #9999E6;font-weight: bold;">ACD</th> <?php if($_POST['CER'] == 'CER') { ?> <th style="border: 1px solid #333333; height: 20px; background: #9999E6;font-weight: bold;">CER</th> <?php if($_POST['TQI'] == 'TQI') { ?> <th style="border: 1px solid #333333; height: 20px; background: #9999E6;font-weight: bold;">TQI</th> <?php if($_POST['min'] == 'min') { ?> <th style="border: 1px solid #333333; height: 20px; background: #9999E6;font-weight: bold;">Minutes</th>和height，然后使用width水平居中，div垂直居中。 margin: auto必须是内部padding: calc(50vh - 10px) 0高度的一半。试试这个：

＆＃13;

10px

＆＃13;

div

＆＃13;

Answer 2

选项1：定位绝对值和平移-50％方法

＆＃13;

body {
  margin: 0; padding: 0;
}
.outer {
  position: relative;
  background-image:url(http://i.imgur.com/55PnNyJ.jpg);
  height:100vh;
  background-size: cover;
  background-repeat: no-repeat;
}
.centered {
  position: absolute;
  top: 50%; left: 50%;
  transform: translateY(-50%) translateX(-50%);
  display: inline-block;
  color: hsla(0, 0%, 100%, 0.4);
  background-color: hsla(0, 0%, 0%, 0.4);
}

＆＃13;

<div class="outer">
  <div class="centered">I'm (almost) On A Boat</div>
</div>

＆＃13;

<强>拨弄

https://jsfiddle.net/Hastig/j7rgjspt/2/

选项2：Flexbox和justify-content / align-items center

＆＃13;

body {
  margin: 0; padding: 0;
}
.outer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image:url(http://i.imgur.com/55PnNyJ.jpg);
  height:100vh;
  background-size: cover;
  background-repeat: no-repeat;
}
.centered {
  display: inline-flex;
  text-align: center;
  color: hsla(0, 0%, 100%, 0.4);
  background-color: hsla(0, 0%, 0%, 0.4);
}

＆＃13;

<div class="outer">
  <div class="centered">I'm (almost) On A Boat</div>
</div>

＆＃13;

<强>拨弄

https://jsfiddle.net/Hastig/j7rgjspt/1/

在所有屏幕分辨率的背景图像中间居中div

2 个答案: