Question

我的外部div是位置：相对而内部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>

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

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

}

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

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

Answer 4

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

它会将div显示为低位（顶部od绝对div应该在父高度的50％ - 相对div上），但是有办法解决这个问题。

例如：甚至还有一个与位置相对的div并将其移动到更高的绝对div高度的一半（这在代码中看起来不是很好） - 你必须知道div的高度，如果你不能测量像jQuery这样的大小并移动div更高一点。

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

可能有人有更好的解决方案，如果是的话我希望看到它们：）

Answer 5

这应该有效：

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

Answer 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 希望，它会帮助你。干杯。 !!

Answer 7

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

顶部和底部定位与汽车？

7 个答案: