如何使中心垂直和水平對齊div？

-3

能否請你告訴我如何使中心垂直和水平對齊div？我有兩個div我需要顯示在頁面的中心。其次還有兩個div之間出現一定的餘量這裏怎麼去除餘量是我的代碼如何使中心垂直和水平對齊div？

<div style="height:100px;width:100px;border:1px solid red;"class="moreinfo"> 


</div> 
     <div style="height:100px;width:100px;border:1px solid red" class="moreinfo"> 


</div>

https://jsfiddle.net/tbnd90fd/

我做這樣的 https://jsfiddle.net/tbnd90fd/1/

最好的方法？

.maindiv{ 

    text-align: center; 
    position: absolute; 
    left: 45%; 
    top: 45%; 
}

我給頂和左.. ..它是最好的方式？以及如何刪除利潤？

來源

2015-09-21 user944513

直視Flexbox的 –

好，我願買電子健康，嘗試和更新你 – user944513

請更新 – user944513

從.maindiv刪除text-align，設置left和right至50%，最後，添加一個更多行transform:translate(-50%, -50%);。通過這種方式，maindiv左上角將被放置在中心和transform將「拉」回來，併爲自己的一半大小（和你不需要margin:auto了）。

有例如：

.moreinfo { 
 
    display: inline-block; 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 
.maindiv 
 
{ 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin:0;padding:0; 
 
    transform:translate(-50%,-50%); 
 
}

<div class="maindiv"> 
 
     <div style="height:100px;width:100px;border:1px solid red;"class="moreinfo"></div><div style="height:100px;width:100px;border:1px solid red;" class="moreinfo"></div> 
 
</div>

更新：

divs的被視爲直列元件。正如兩個跨度之間的空間或分界線會造成間隙一樣，它會在內聯塊之間進行。您可以給他們一個負值保證金...在這個例子中，您可以將moreinfo,margin:0px更改爲margin:-2px;。

有fiddle example

來源

2015-09-21 09:52:25 nelek

爲什麼邊緣存在於div @ – user944513

（如@ G.L.P）之間。寫道，你必須刪除這兩個內部div之間的所有空間。 – nelek

@ user944513請參閱更新。 – nelek

嘗試這樣的：

<div class="moreinfo">   
    </div><div class="moreinfo"></div> <!-- Remove the spaces -->

CSS：

.moreinfo { 
    display:inline-block; 
    vertical-align: top; 
    margin:0px; 
    padding:0px; height:100px; 
    width:100px; 
    border:1px solid red; 
}

僅供參考：試試這個Link

來源

2015-09-21 09:46:03

，但如何使中心對齊？..水平和垂直中心 – user944513

如何使中心垂直和水平對齊div？

回答

相關問題