縱向和橫向居中

縱向和橫向居中可能是佈局頁面最煩人的事情之一。
儘管發現了很多解決方案See This和This，但我沒有看到任何符合我的問題的解決方案。
我的問題在這裏演示JSFiddle。縱向和橫向居中

我試過這個垂直的，它沒有工作。任何其他的垂直？

out { 
    display: table; 
} 

in { 
    display: table-cell; 
    vertical-align :middle; 
}

來源

2013-07-29 Andrew Liu

我不明白你的小提琴。沒有任何內容對應於「out」或「in」。 – FlavorScape

不用擔心頁面中的代碼，Fiddle描述的問題@ FlavorScape –

它沒有任何意義。該按鈕在桌子外面。 – FlavorScape

如果要垂直和水平居中的東西，here是的jsfiddle。

#cdiv { 
    background-color: #FFFF00; 
    color: #000000; 
    width: 300px; 
    height: 200px; 
    display: none; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin: -100px 0 0 -150px; 
}

解摘自：Tutorialzine

來源

2013-07-30 01:00:50

事情是你真的不知道桌子的高度，它總是會被改變 –

然後也許是一個javascript，它獲取表格的高度並調整相應的動態CSS屬性是解決方案。 –

我已經加入

margin-right:33%; 
margin-left:33%;

現在餐桌水平排列的按鈕，我已經相對定位成在div並賦予它一個排名前50％。

EXAMPLE FIDDLE

編輯：另一種方式來定位你的表在你的DIV是給它的利潤率（上，右，左）爲了更好地定位。

希望這有助於

來源

2013-07-30 00:08:25 Thanos

即使認爲水平對象似乎是硬編碼，它也可以工作。但是垂直的不會改變桌面的高度 –

這將垂直和水平中心的任何格在給定區域。這將需要你的一些數學才能讓它正確。這裏是一個CodePen：http://codepen.io/anon/pen/xbzgyO

HTML：

<div id="mydiv"> 
<!--Content you want centered goes here--> 
</div>

CSS：

#mydiv { 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    width:30em; 
    height:30em; 
    margin-top: -9em; /*set to a negative number 1/2 of your height*/ 
    margin-left: -9em; /*set to a negative number 1/2 of your width*/ 
    background-color:#222126; 
}

希望它能幫助！

來源

2015-02-27 00:53:32

縱向和橫向居中

回答

相關問題