Question

我有一个div，它有一个包含UL的嵌套div。 div（嵌套）应该垂直居中;但是，我试图让它居中的任何技巧都不起作用。 PARENT

.splash {
    background: url(../img/splash.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    text-align: center;
    min-width: 30%;
    min-height: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

子

.media {
    display: block;
    position: absolute;
    padding-left: 3px;
    left: 0;
}

Answer 1

垂直居中非常简单。我喜欢使用translateY方法，如.media中所示：

＆＃13;

html, body {
  margin: 0;
}

.splash {
    background-image: url(https://images.unsplash.com/reserve/Hxev8VTsTuOJ27thHQdK_DSC_0068.JPG?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    text-align: center;
    min-width: 30%;
    min-height: 50%;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media {
    display: block;
    position: absolute;
    padding-left: 3px;
    left: 0;
    font-size: 150%;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, .5);
    padding: .75em 1em;
}

＆＃13;

<div class="splash">
  <div class="media">
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>  
</div>

＆＃13;

我在.media后面添加了背景色，仅用于文本可读性。此外，对于该示例，我将父级的宽度和高度更改为100vw和100vh，以使其在整个视口中延伸。添加top: 50%和transform: translateY(-50%)实际上是实现了居中的目标。

https://jsfiddle.net/0o2kwv2w/

Div不仅仅在Safari中垂直居中

1 个答案: