javascript - 将一个 div 在另一个具有绝对位置状态的 div 内水平居中

Question

我试图将一个 div 在另一个 div 内水平居中。我试图居中的 div 是一个向下滚动按钮，它使用 jQuery 并具有我制作的自定义图标字体和默认宽度/高度。我想将这个 div 放在我的主 div 中并保持原始大小，因为我想继续将它用作按钮。例如: 我想制作类似白色箭头的东西，它在中心指向下方，但又不会弄乱我的宽度。 这是我的代码:

HTML

<div id="intro-tab"> <!-- First/Intro Tab -->
    <div id="introtab-godownbtn">Q</div>
</div>

CSS

#intro-tab {
    width: auto; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    background-color: red; 
    box-shadow: 0px 1px 3px #000;
}

#introtab-godownbtn {
    font-family: iconFont; 
    font-size: 50px; 
    position: absolute; 
    bottom: 25px; 
    width: 60px; 
    height: 30px; 
    left: 50%; 
    margin-left: 30px; 
    background-color: #FFF;
}

#introtab-godownbtn:hover {
    cursor: pointer;
}

jQuery

$('#introtab-godownbtn').click(function(){
    $("html, body").animate({ 
        scrollTop: (screen.height - 90) 
    }, 600);
    return false; 
});

我已经尝试了很多方法来使按钮 introtab-godownbtn 居中，但它不起作用，或者它只是弄乱了我的按钮大小和点击位置。我的问题有什么解决方案吗？

Answer 1

据我了解，您正在尝试将 HTML 元素水平居中。通常，人们会使用 margin: 0 auto; 方法，其中在应用它的元素上设置固定宽度。这是一个这样的例子:http://jsfiddle.net/5XTq2/

如果此答案没有帮助，您能否提供您尝试实现的布局的模型/屏幕截图？我很乐意更新答案以满足您的需要。

编辑:根据您的 Spotify 示例，如果您检查页面并选择向下箭头，它将具有以下样式。

.scroller-arrow {
    width: 60px;
    height: 60px;
    background-image: url(../i/_global/arrow-big.png);
    cursor: pointer;
    display: block;
    margin: 0 auto;
    position: relative;
   -webkit-tap-highlight-color: transparent;
}