使用CSS 3垂直对齐

74

使用CSS 3，有什么方法可以垂直对齐块元素？你有例子吗？谢谢。

— tho
source

1

这不是CSS 3方式...

— tho

2

@Tho是的。CSS 3是CSS 2的超集。

— ŠimeVidas

3

好的，您是对的，我同意您的肯定……但是css3是否提供了一些简单的方法？谢谢。

— tho

1

CSS3的另一个例子是一个被过度炒作的流行语。CSS3只是CSS级别3。任何CSS1和CSS2.x代码也是有效的CSS3，请克服它。

— BoltClock

6

slides.html5rocks.com/#flex-box-2

— 寿

87

最近正在研究此问题，并尝试：

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/

当使用“宽度/高度：自动”代替固定尺寸时，它甚至可以工作。在Firefox，Chrome和IE的最新版本上进行了测试（*喘气*）。

— 查理
source

3

有史以来最好的解决方案。不要忘记使用Modernizr的csstransforms检测：-)

— myfreeweb 2013年

9

使用这种方法时要非常小心。转换元素使用GPU，最终将Pixels作为浮点计算。因此，最终可能会以亚像素值移动对象并获得模糊的结果。看看这篇文章的更多详细信息：martinkool.com/post/27618832225/beware-of-half-pixels-in-css

— Laith

为避免由于“半像素”问题而导致模糊的结果，请尝试添加transform-style: preserve-3d;到父元素（来源：zerosixthree.se/…）。

— 尼克

12

好像w3.org喜欢您的方法。他们将其放在他们的网站上w3.org/Style/Examples/007/center.en.html#vertical 很好的解决方法：)

— trve.fa7ad 2014年

1

@ n611x007，您无需将左样式设置为垂直对齐。设置left和translateX将使内容水平对齐，设置top和translateY将使内容垂直对齐。

— 1.21吉瓦

34

注意：此示例使用“柔性盒布局模块”的草稿版本。它已被不兼容的现代规范所取代。

通过将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;
}

— Crashalot
source

1

这就是我一直在寻找的：CSS的新添加（即CSS3）比所有旧的CSS1 / 2 hacks都更容易实现。谢谢。

— thaddeusmt 2012年

34

使用Flexbox：

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

<div class="container">
  <div class="block"></div>
</div>

中心block内container垂直（和水平）。

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

— 安德里·内姆琴科（Andrii Nemchenko）
source

9

几种方法：

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.使用显示：表格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/

— HandiworkNYC.com
source

3

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

只需为您的div设置一个高度并应用此样式

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

希望这会有所帮助。

— 爱德华·康博
source

这要求将父对象定位（即position: relative）。

— alxs

2

我总是使用本文中的教程来确定事物的中心。这很棒

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％”是指元素本身的高度。）

— Neo先生
source

1

您可以使用translateY（-50％）来设置Y轴。设置转换样式：preserve-3d；为防止半像素值上的文字模糊，并确保包含用于转换和转换样式的供应商前缀。

— 1.21吉瓦

通过找到w3中心示例找到此答案。然后通过找到此答案找到w3中心示例。Excel说得最好。检测到循环参考！

— panhandel

0

试试这个也可以完美地工作：

的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

}

— G先生
source

-1

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

— 戴夫
source

1

其实不远。您可以在此元素之前添加另一个元素（或在父元素上使用：before psuedo元素）。然后让该新元素的高度为100％，宽度为1px，左边距为：-1px。然后给它一个inline-block和vertical-align：middle CSS属性。然后，您必须确保父元素具有定义的高度。

— Artvader