使用CSS 3垂直对齐

Question

使用CSS 3，有没有办法垂直对齐块元素？你有一个例子吗？谢谢。

Answer 1

最近正在看这个问题，并尝试过：

HTML：

<body>
    <div id="my-div"></div>
</body>

CSS：

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

这是小提琴：

http://jsfiddle.net/sTcp9/6/

在使用“width / height：auto”时，它甚至可以在固定尺寸的位置使用。测试了Firefox，Chrome和IE上的最新版本（* gasp *）。

Answer 2

注意：此示例使用draft version of the Flexible Box Layout Module。它已被不相容的modern specification.所取代

通过将box-align和box-pack属性放在一起，使div框的子元素居中。

例：

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

Answer 3

使用Flexbox：

.container {
    display: flex;
    /* Vertical align: */
    align-items: center;
    /* Horizontal align: */
    justify-content: center;
}

的jsfiddle：http://jsfiddle.net/maars/8Uyvf

浏览器支持：http://caniuse.com/flexbox

Answer 4

几种方式：

1.绝对定位 - 你需要有一个声明的高度来完成这项工作：

<div>
   <div class='center'>Hey</div>
</div>

div {height: 100%; width: 100%; position: relative}
div.center {
     width: 100px;
     height: 100px;
     top: 50%;
     margin-top: -50px;
}

* 2。使用display：table http://jsfiddle.net/B7CpL/2/ *

<div>
     <img src="/img.png" />
     <div class="text">text centered with image</div>
</div>


div {
     display: table;
     vertical-align: middle
}

div img,
div.text {
     display: table-cell;
     vertical-align: middle
}

使用display：table的更详细的教程

http://css-tricks.com/vertically-center-multi-lined-text/

Answer 5

有一种简单的方法可以在css中垂直和水平对齐div。

只需在你的div上加一个高度并应用这种风格

.hv-center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

希望这有帮助。

Answer 6

我总是使用this article的教程来集中精力。这很棒

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

基本规则是：

使容器相对定位，声明它是绝对定位元素的容器。
使元素本身绝对定位。
将容器放在容器中间，“顶部：50％”。（注意，50％'在这里意味着容器高度的50％。）
使用平移将元素向上移动自身高度的一半。（'translate（0，-50％）'中的'50％'是指元素本身的高度。）

Answer 7

试试这个也很完美：

HTML：

   <body>
    <div id="my-div"></div>
   </body>

CSS：

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    display: table-cell;
    vertical-align: middle

}

Answer 8

您可以通过设置要显示的元素来垂直对齐：inline-block，然后设置vertical-align：middle;

使用CSS 3垂直对齐

问题描述投票：71回答：8

8个回答

最新问题

使用CSS 3垂直对齐

问题描述 投票：71回答：8

8个回答

最新问题

问题描述投票：71回答：8