垂直居中文本在 IE 和 Firefox 中不起作用

Question

我正在尝试为我的网站创建一个占位符页面，但运行遇到了一些有关跨浏览器兼容性的问题。它在 chrome 和我的 phone 和 iPad 上的手机 iOS 上工作正常，但在 IE 或 FireFox 上不工作。我已经尝试了几种垂直对齐的方法，但似乎无法使它们中的任何一种正常工作。有没有我遗漏的东西，或者有没有办法在所有浏览器中正确显示？非常感谢！

实时站点：http://www.radicalcreation.com

HTML:

<html>

    <head>

        <title>Radical Creation</title>

        <link rel="stylesheet" type="text/css" href="default.css"/>
        <link rel="shortcut icon" href= "images/favicon.png"/>
        <link rel="icon" href="images/favicon.png" type="image/x-icon">
        <!-- JavaScript Links -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="jscript/s3Slider.js"></script>
<!--    <script type="text/javascript" src="/jscript/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" src="/jscript/custom.js"></script> -->
        <script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>
        <script type='text/javascript' src='js/jquery.particleground.min.js'></script>
        <script type='text/javascript' src='js/demo.js'></script>

    </head>

    <body>



            <div class="title">
            <div class="main-title"><span class="thin">Radical</span>Creation</div>
            <h3>Coming Soon!</h3>
            </div>

        <div id="particles">
        </div>

    </body>

    </html>

CSS:

html {
    height: 100%;
    overflow:hidden;
}
body {
    font-family: ‘Lucida Console’, Monaco, monospace;
    background-repeat: none;
    background-size: cover;
    background-position: center;
    background-image: url(images/stars.jpg);
}

h2, h3 {
    font-weight: lighter;
    color: #4EB4FC;
    position: relative;
}


.title{
    margin-top: -100px;
    top: 54%;
    text-align: center;
    position: relative;
    float: center;
}

.main-title .thin {
    font-weight: 200;
}

.main-title {
    top:10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 30px;
    color: #f9f1e9;
    font-family: 'Raleway', Calibri, Arial, sans-serif;
    transform : scale(1.0,0.8);
    -webkit-transform:scale(1.2,1.0); /* Safari and Chrome */
    -moz-transform:scale(1.0,0.8); /* Firefox */
    -ms-transform:scale(1.0,0.8); /* IE 9+ */
    -o-transform:scale(1.0,0.8); /* Opera */
}

#particles {
    top: -5px;
    height:100%;
    opacity: .6;
}

Answer 1

垂直对齐总是很棘手，因为 CSS 不支持它。您可以尝试 this question or in this one 中的一些 hack，但如果它仍然不适合您，最简单的解决方案是使用 javascript/jQuery。它会是这样的（加上使 .title 绝对定位）：

<script>
$(function () {
  $(window).on('resize', function () {
    var title = $('.title');
    var top = $(window).height() / 2 - title.outerHeight() / 2;
    $('.title').css('top', top + 'px');
  }).trigger('resize');
});
</script>

如果您不知道如何使用 javascript/jQuery，只需将上面的代码粘贴到您的页面（例如，在 head 部分），同时导入 jQuery： <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Answer 2

纯CSS解决方案：（需要 .title 设置高度）

.title{
text-align: center;
width: 100%;
position: absolute;
top: 0%;
bottom: 0%;
height: 100px;
margin: auto;
}

看这里： https://jsfiddle.net/svArtist/cn5fb6ua/

垂直居中文本在 IE 和 Firefox 中不起作用

Center Text Vertically Not working in IE and Firefox

html

css

vertical-alignment