html - 标题以桌面为中心，而不是移动？

Question

我有一张横幅图片，上面有标题。在桌面上查看时，标题是垂直和水平对齐的。但是，使用移动设备会使它水平居中，而不是垂直居中。(我知道最好使用样式表，但目前，我有内嵌 CSS。我最终会修复它。CSS/HTML:

<div class="banner-b" style="position: relative; height: 300px; background: url(http://s6.postimg.org/j8n8hawrl/Flower.png) center no-repeat; background-size: cover; top: 0; left: 0; right: 0; bottom: 0;">
                <div class="overlay-b" style="position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: url(http://s6.postimg.org/6sqink3fl/Flower_Blur.png) center no-repeat; background-size: cover; z-index: 0; opacity: 0;"></div>
                <div class="content-b" style="margin: 0px auto; z-index: 10; text-align: center; position: relative; top: 50%; transform: translateY(-50%); font-size: 50px;">
                    <hgroup style="margin: 0px auto; display: inline-block; vertical-align: middle; textalign: center; position: relative; top: 0%; left: 0%; color: #fff; border: 5px solid #fff; padding: 40px; background-color: rgba(0, 0, 0, .7); z-index: -100;">
                         <h1 style="margin: 0px auto; color: white;">Wolf Valley</h1>

                    </hgroup>
                </div>
            </div>

网站:wolfvalley.freeforums.net

Answer 1

这是您的浏览器:css transform 属性需要针对 Safari 进行修复。尝试:

 <div class="content-b" style="margin: 0px auto; z-index: 10; text-align: center; position: relative; top: 50%; transform: translateY(-50%); -webkit-tranform: translateY(-50%); -moz-transform: translateY(-50%); font-size: 50px;">