如何水平外格內中心內的div？

這裏面DIV的我的HTML代碼：

<div id="outer" class="outerDiv"> 
    <div id="inner" class="innerDiv"> 
    </div> 
</div>

這裏的CSS：

.outerDiv { 
    width:100px; 
    height:100px; 
    background:red; 
} 

.innerDiv { 
    width:50px; 
    height:50px; 
    background:blue; 
    // what to add here ? 
}

你可以嘗試一下：http://jsfiddle.net/nggSG/

我該如何將紅色div內的藍色水平居中？

來源

2013-06-19 Ashraf Bashir

，如果你也想verticallly居中這是一個有點困難......如果你想我發佈代碼。 – cocco

.innerDiv { 
    margin: auto; 
    width:50px; 
    height:50px; 
    background:blue; 
}

中心水平的div

來源

2013-06-19 15:41:05 majk86

這樣的：

.innerDiv { 
    width:50px; 
    height:50px; 
    background:blue; 
    margin : 0 auto; 
    }

來源

2013-06-19 15:40:36

這裏就是你需要做的：

.outerDiv { 
    width: 100px; height: 100px; 

    background-color: red; 
    position: relative; 
} 

.innerDiv { 
    width: 50px; height: 50px; 
    top: 25px; left: 25px; 

    background: blue; 
    position: absolute; 
}

如果減去外層div的寬度和高度從2內的div和鴻溝，你知道你需要多少內部的div動過。此外，外層div 必須是position: relative和內DIV 必須是position: absolute。

如果你需要一個更有活力的中心的解決方案，我一直在使用Midway.js由希普公司（http://shipp.co/midway）被。希望這有助於！

編輯：的jsfiddle - http://jsfiddle.net/5A9sq

來源

2013-06-19 16:15:06

你是認真的嗎？垂直居中的確有時候會有點挑戰性，但可以很容易地實現水平居中。您的解決方案是不靈活，難以維持，儘管這確實是這個特定的小提琴做的工作。你提供的鏈接是關於一個絕對定位元素的集中，直到你在你的答案 –

哇，夥計，放鬆。感謝-1，但OP已經選擇了一個答案，從而使我的無效。每個人都很好。 –

這裏是我的HTML

<div id="outer" class="outerDiv"> 
    <div id="inner" class="innerDiv"> 
     Inner div (centered) 
    </div> 
</div>

簡單的CSS

.outerDiv{ 
     width:100%; 
     margin:0 auto; 
     text-align: center; 
     background-color: red; 
    } 

    .innerDiv{ 
     width:50%; 
     display: inline-block; 
     background-color: yellow; 
     color: black; 
    }

來源

2017-08-08 13:12:38

如何水平外格內中心內的div？

回答

相關問題