如何垂直和水平的一个div在Safari中显示flex

我想垂直和水平居中另一个div中的div。
如何垂直和水平的一个div在Safari中显示flex

我已经在各种浏览器中测试过这段代码：它在除Safari之外的每个浏览器中均按预期工作，其中div内部水平居中而非垂直居中。
我该如何解决这个问题？

.newsletterHome { 
 
    width: 495px; 
 
    height: 200px; 
 
    display: block; 
 
    position: relative; 
 
    padding-bottom: 20px; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    border-color: #000; 
 
    margin-bottom: 40px; 
 
} 
 

 
.newsletterHome div { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 100%; 
 
    height: 100%; 
 
    font-size: 1.45em; 
 
} 
 

 
.newsletterHome a { 
 
    -webkit-font-smoothing: subpixel-antialiased; 
 
    -webkit-appearance: none; 
 
    transition: .3s; 
 
    -webkit-transition: .3s; 
 
    -moz-transition: .3s; 
 
}

<div class="newsletterHome"> 
 
    <a target="_blank" href="#"><div>SIGN UP FOR OUR NEWSLETTER!</div></a> 
 
</div>

来源

2015-09-04 DamianFox

这通常是一个厂商前缀的问题。您是否检查过相关的供应商前缀？ [**前缀JSFiddle演示**]（http://jsfiddle.net/smonoqp4/） –

我是能够解决的问题：

.newsletterHome div { 
    width: 100%; 
    height: 30%; 
    overflow: auto; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    font-size: 1.45em; 
}

来源

2015-09-04 13:08:42 DamianFox

我改变你的CSS：

.newsletterHome div { 

    display: inline-flex; 
    font-size: 1.45em; 
    position: absolute; 
    top: 90px; 
    left: 50px; 
    white-space: nowrap; 
    text-decoration: underline; 

}

这是一种解决问题的手工方式，但它的作品。 “flex”是我认为的问题。它们在所有浏览器中的工作方式都不相同。

来源

2015-09-04 12:40:35 coozin

如何垂直和水平的一个div在Safari中显示flex

回答

相关问题