Question

我想在另一个div内垂直和水平居中一个div。

我已经在各种浏览器中测试了这个代码：它在除Safari之外的每个浏览器中都按预期工作，其中div内部水平居中而不是垂直居中。
我怎么能解决这个问题？

int

.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;
}

Answer 1

我改变了你的css：

.newsletterHome div {

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

}

这是解决问题的一种手动方式，但它有效。在我看来，“弹性”是个问题。它们在所有浏览器中的工作方式不同。

Answer 2

我能够解决问题：

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

如何在Safari中垂直和水平显示带有display flex的div

2 个答案: