Question

我知道margin:0 auto;会将div居中，但我也希望将其垂直居中，所以我用了这个

vertical-align:middle;
top:50%;
transform:translate Y(-50%);

但是当我运行此代码时，div垂直居中但不会水平居中。请有人能给我一个关于如何纵向和横向居中的更好线索。

Answer 1

在尝试后，要垂直和水平居中，请尝试以下操作：

// assumed positioned element
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Reference，以及另一个好resource。

Answer 2

Flex已经变得非常受欢迎，我建议因为它的其他功能。

小提琴：https://jsfiddle.net/ne38nx7t/1/

HTML：

<div class="Aligner">
   <div class="Aligner-item">Apples</div>
</div>

CSS：

.Aligner {
    height: 100px;
    border: 2px solid blue;

    display: flex;
    align-items: center;
    justify-content: center;
}

Flex Vertical

Answer 3

我还没有看到你的整个代码随意将你的代码发布到小提琴上，直到然后检查我创建的以下小提琴，水平和垂直居中内容，内容中的动态高度在哪里

http://jsfiddle.net/Q92Lb/2/

<html>
<head>

<style>
* { margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/

#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/

*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/

html,body{height:100%;}
#page{height:100%;width:465px;}
</style>
</head>
<body>
<div id="page">
       <div id="content_container">
               <div id="content">
                     <p>your content</p>
               </div>
       </div>
</div>
</body>
</html>

垂直对齐后边距自动不起作用

3 个答案: