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

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

html css

Html 垂直居中文本在IE和Firefox中不起作用,html,css,vertical-alignment,Html,Css,Vertical Alignment,我试图为我的网站创建一个占位符页面，但遇到了一些关于跨浏览器兼容性的问题。它在我的手机和iPad上的chrome和我的移动iOS上运行良好，但在IE或FireFox上则不行。我试过几种垂直对齐的方法，但似乎都不能正常工作。是否有我遗漏的东西，或者是否有一种方法可以在所有浏览器中正确显示？非常感谢现场直播： HTML: <html> <head> <title>Radical Creation</title>

我试图为我的网站创建一个占位符页面，但遇到了一些关于跨浏览器兼容性的问题。它在我的手机和iPad上的chrome和我的移动iOS上运行良好，但在IE或FireFox上则不行。我试过几种垂直对齐的方法，但似乎都不能正常工作。是否有我遗漏的东西，或者是否有一种方法可以在所有浏览器中正确显示？非常感谢

现场直播：

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中不隐式支持垂直对齐。您可以尝试一些类似in或in的黑客攻击，但是如果它仍然不适合您，最简单的解决方案是使用javascript/jQuery。它将是这样的（加上制作。标题绝对定位）：


$（函数（）{
$（窗口）.on（'resize'，函数（）{
变量title=$（'.title'）；
var top=$（window.height（）/2-title.outerHeight（）/2；
$（'.title'）.css（'top'，top+'px'）；
}).trigger（'resize'）；
});

如果您不知道如何使用javascript/jQuery，只需将上面的代码粘贴到页面中（例如，在页眉部分），并导入jQuery：

纯CSS解决方案：（要求

.title

具有设置的高度）

请看这里：

实时网站链接已断开。是的，我刚刚修复了它

float:center

不存在。看见我在IE中测试过。我真的不知道定位是否错误，或者标题只是隐藏在另一个元素（画布）后面。你能描述一下你自己的发现吗？

.title

对象有一个负的上边距，它将对象移出了

。（它有一个

top:54%；

规则，但被设置为

position:relative；

，在不同的浏览器上，当没有兄弟元素可以工作，但似乎会干扰页面上的其他脚本时，它会做出不同的反应。不过，感谢您的帮助！工作得很好！非常感谢！

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

<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>

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