在另一个div中垂直居中一个div

我想在另一个div里面居中一个div。

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

这是我目前使用的CSS。

    #outerDiv {
        width: 500px;
        height: 500px;
        position: relative;
    }
    
    #innerDiv {
        width: 284px;
        height: 290px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -147px;
        margin-left: -144px;
    }

如您所见，我现在使用的方法取决于#innerDiv的宽度和高度。如果宽度/高度改变，我将不得不修改margin-top和margin-left值。是否有任何通用的解决方案，我可以使用中心的#innerDiv独立于它的大小?

我发现使用margin: auto可以水平对齐#innerDiv到中间。但是垂直排列呢?

当前回答

这对我很有用。可以定义外部div的宽度和高度。

代码如下:

.outer { 位置:相对; text-align:中心; 宽度:100%; 身高:150 px;//允许任何高度，也在%中。背景:灰色; ｝ .outer > div:first-child { 位置:绝对的; 上图:50%; 左:50%; 宽度:100%; -webkit-transform (-50%， -50%); -ms-transform: -50%， -50%; 转换:翻译(-50%，-50%); 背景:红色; ｝ < div class = "外" > < div class = "内部" > 把你的文本或div内容放在这里! < / div > < / div >

2016-02-24 21:49:00

其他回答

试着像这样对齐内部元素:

top: 0;
bottom: 0;
margin: auto;
display: table;

当然还有:

position: absolute;

2015-10-21 12:42:52

垂直居中的div项目在另一个div

只需将容器设置为display:table，然后将内部项设置为display:table-cell。在容器上设置高度，然后在内部项目上设置垂直对齐:中间。早在IE9时代，它就具有广泛的兼容性。

请注意，垂直对齐将取决于父容器的高度。

. cn ｛显示:表; 身高:80 px; background - color: # 555; ｝在｛显示:表格单元; vertical-align:中间; 颜色:# FFF; padding-left: 10 px; padding-right: 10 px; ｝ < div class = " cn”> <div class="inner">Item 1</div> <div class="inner">Item 2</div> < / div >

2018-01-02 23:58:53

这对我很有用。可以定义外部div的宽度和高度。

代码如下:

2016-02-24 21:49:00

你可以在CSS中使用flex将div垂直和水平居中;

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

第二个是这样的;

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

以及生成的HTML:

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>

2016-03-28 20:35:29

我个人更喜欢使用隐藏的伪元素来跨越外部容器的整个高度，并将其与其他内容垂直对齐。 Chris coyer有一篇关于这项技术的好文章。http://css-tricks.com/centering-in-the-unknown/ 这样做的巨大优势是可伸缩性。你不必知道内容的高度，也不必担心它的增长/缩小。此解决方案可伸缩:)。

这里有一个你需要的所有CSS和一个工作示例。 http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}

2015-05-22 16:31:11

在另一个div中垂直居中一个div

推荐文章

最新文章

标签