自动上下定位？答案

【问题标题】：top and bottom positioning with auto?自动上下定位？
【发布时间】：2012-10-21 14:48:25
【问题描述】：

我的外部 div 是 position:relative，内部 div 是绝对定位。

我想设置我的内部 div 中心垂直对齐并考虑使用 top:auto 和 bottom:auto 但它不起作用。请告诉我如何做到这一点。

        div.Container div.Right 
    {
            width:50%;
            float:right ;
            border: 01px dashed green;
            height:95px !important;    
            position:relative !important;
    }   

     div.header-search
    {    
        overflow:auto;
        display:inline;    
        border:0px dashed blue;        
        position:absolute;
        top:auto;
        bottom:auto;
        right:0px;
    }



 <div class="Right">
            <div class="header-search">
                <input type="text" class="searchbox" />
                <input type="button" class="searchbutton" value="›" />
            </div>
</div>

【问题讨论】：

标签： asp.net .net html css xhtml

【解决方案1】：

您可以在外部 div 中使用 line-height:95px;，在内部 div 中使用 vertical-align: middle;，如下所示：

div.Right
{
    width:50%;
    float:right ;
    border: 01px dashed green;
    line-height:95px !important;   
    display: block;
}   

div.header-search
{    
    overflow:auto;
    border:0px dashed blue;       
    vertical-align: middle;
}

你可以在这里玩：http://jsfiddle.net/leniel/5Mm67/

如果你想水平对齐内部div的内容，只需在div.Right中添加这个：

text-align: center;

结果如下：http://jsfiddle.net/leniel/5Mm67/1/

【讨论】：

【解决方案2】：

实现您所追求的最佳方法是删除 bottom:auto; 样式并将 top:auto; 替换为 top:50%; 。之后计算出您要居中的搜索栏的高度（比如 20px）并为其高度的一半添加负边距样式，因此如果它是 20px，则样式将为 margin-top:-10px;

你的 CSS 应该是这样的：

 div.header-search
{    
    overflow:auto;
    display:inline;    
    border:0px dashed blue;        
    position:absolute;
    top:50%;
height:20px;
margin-top:-10px;
right:0;

}

【讨论】：

【解决方案3】：

将 .header-search 设置为 top:50% 或 bottom:50% 然后使用 margin-top:-(div 高度的一半) 或 margin-bottom:-(div 高度的一半);分别。我有时也只是简单地使用 top:50% 或 bottom: 50% 而没有负边距。

例如：

 div.header-search
    {    
        overflow:auto;
        display:inline;    
        border:0px dashed blue;        
        position:absolute;
        top:50%;
        height: 500px;
        margin-top:-250px;
        right:0px;
    }

是的，在这种情况下，您必须设置一个固定的高度。

【讨论】：

【解决方案4】：

在div中设置绝对位置：“top:50%;”

它会将 div 显示得稍微低一些（绝对 div 应该正好在父高度的 50% - 相对 div 上），但是有一些方法可以解决这个问题。

例如：用相对位置再做一个 div 并用绝对 div 高度的一半将其移高（这在代码中看起来不太好） - 你必须知道 div 的高度，如果你不知道，你可以像 jQuery 一样测量大小并移动 div高一点。

最简单的方法：也许尝试 45% 而不是 50%（如果不是像素到像素的设计）。

可能有人有更好的解决方案，如果是这样，我希望看到他们:)

【讨论】：

【解决方案5】：

这应该可行：

div.header-search
{    
    overflow:auto;
    display:inline;    
    border:0px dashed blue;        
    position:absolute;
    top:50%;
    right:0px;
}

【讨论】：

【解决方案6】：

嗨，有几种方法可以通过 CSS 的魔力来实现 div 的垂直居中。这是示例，我已经测试过它可以正常工作...并且可以正常工作。

HTML：

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS：

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

这里是其他方法click here to see complete reference 希望，它会帮助你。干杯。！！

【讨论】：

【解决方案7】：

尝试将内部 div 设置为 margin: auto 0;

【讨论】：

这适用于具有固定宽度的水平居中元素，但不适用于垂直居中的东西