在 Safari 中使用 flex 将内容居中

Posted 2023-03-29

【中文标题】在 Safari 中使用 flex 将内容居中

【英文标题】：centering content using flex in safari

【发布时间】：2017-02-16 08:00:55

【问题描述】：

我在 Safari 中使用 flex 时遇到了一些问题。当我尝试将输入内容居中时，它会产生一些奇怪的效果：

CSS 是

input[type=submit] 
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 386px;
    height: 47px;
    margin: auto auto 0;
    font-size: 1.25em;
    line-height: 24px;
    color: #fff;
    background-color: #d08b4d;
    border-radius: 24px;
    -webkit-box-shadow: 3px 5px 10px rgba(0, 0, 0, .1);
    box-shadow: 3px 5px 10px rgba(0, 0, 0, .1);
    padding: 0;
    border: none;
    outline: 0;
    cursor: pointer

我将相同的代码应用于 div，没关系，内容在块中具有中心位置。 那部分代码的html

<form>
<h3 class="form-title">Send a message</h3>
<input type="text" name="name" title="name" placeholder="Name" required>
<input type="email" name="email" title="email" placeholder="Email" required>
<textarea name="message" id="" title="message" placeholder="Message" required></textarea>

<input type="submit" value="Send">
</form>

使用其他浏览器我没有任何问题，无论是移动设备还是桌面设备。此代码在 safari > 7 上进行了测试。 是否有一些原生 css 解决方案？

【参考方案1】：

我在 safari 9.1.2 上寻找这个问题，帮助我将项目居中的是旧的 2009 年 Flexbox 规范：

display: -webkit-box;
-webkit-box-pack: center; /* justify-content */
-webkit-box-align: center; /* align-items */

尝试删除display: flex;，看看它是否适合你。