纵向和横向居中

纵向和横向居中可能是布局页面最烦人的事情之一。
尽管发现了很多解决方案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

纵向和横向居中

回答

相关问题