使用 CSS 3 垂直对齐
Posted
技术标签:
【中文标题】使用 CSS 3 垂直对齐【英文标题】：Align vertically using CSS 3 【发布时间】：2011-07-21 17:44:19 【问题描述】：使用 CSS 3，是否有任何方法可以垂直对齐块元素？你有一个例子吗？ 谢谢。
【问题讨论】：
这不是 CSS 3 方式... @Tho 是的。 CSS 3 是 CSS 2 的超集。 好吧，你是对的，我同意你的肯定......但是css3提供了一些更简单的东西吗？谢谢。 CSS3 的另一个例子是一个被过度炒作的流行语。 CSS3 只是 CSS 级别 3。任何 CSS1 和 CSS2.x 代码也是有效的 CSS3，克服它。 slides.html5rocks.com/#flex-box-2 【参考方案1】：使用弹性盒：
<style>
.container
display: flex;
align-items: center; /* Vertical align */
justify-content: center; /* Horizontal align */
</style>
<div class="container">
<div class="block"></div>
</div>
在container 内垂直（和水平）居中block。
浏览器支持：http://caniuse.com/flexbox
【讨论】：
【参考方案2】：我总是使用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%' 是指元素本身的高度。）
【讨论】：
您可以使用 translateY(-50%) 来设置 Y 轴。设置变换样式：preserve-3d；以防止半像素值上的文本模糊，并确保为 transform 和 transform-style 包含供应商前缀。 通过找到 w3 中心示例找到了这个答案。然后通过找到这个答案找到了 w3 中心示例。 Excel 说得最好；检测到圆形参考！【参考方案3】：注意：此示例使用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;
【讨论】：
这就是我一直在寻找的：对 CSS（即 CSS3）的新添加，使其比所有旧的 CSS1/2 hack 更容易。谢谢。【参考方案4】：有一种简单的方法可以在css中垂直和水平对齐一个div。
只需为您的 div 设置一个高度并应用此样式
.hv-center
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
希望这会有所帮助。
【讨论】：
这需要定位父级（即position: relative）。【参考方案5】：
试试这个也很好用：
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
【讨论】：
【参考方案6】：最近在看这个问题，试过了：
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 上的最新版本上进行了测试 (* gasp *)。
【讨论】：
有史以来最好的解决方案。不要忘记使用 Modernizr 的 csstransforms 检测 :-) 对这种方法要非常小心。翻译元素使用 GPU，最终将像素计算为浮点数。因此，您最终可能会以亚像素值移动对象并获得模糊的结果。查看这篇文章了解更多详情：martinkool.com/post/27618832225/beware-of-half-pixels-in-css 为避免“半像素”问题导致结果模糊，请尝试将transform-style: preserve-3d; 添加到父元素（来源：zerosixthree.se/…）。
好像 w3.org 喜欢你的方法。他们把这个放在他们的网站上w3.org/Style/Examples/007/center.en.html#vertical很好的解决方案伙伴:)
@n611x007 您不需要将左侧样式设置为垂直对齐。设置 left 和 translateX 将水平对齐内容，设置 top 和 translateY 将垂直对齐内容。【参考方案7】：
你可以通过设置一个元素来显示垂直对齐：inline-block，然后设置vertical-align:middle;
【讨论】：
其实不远了。您可以在此之前添加另一个元素（或在父元素上使用 :before 伪元素）。然后让该新元素具有 100% 的高度和 1px 的宽度以及 margin-left:-1px。然后给它一个 inline-block 和 vertical-align:middle css 属性。然后你必须确保父元素有一个定义的高度。【参考方案8】：几种方法：
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.使用显示：tablehttp://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/
【讨论】：
以上是关于使用 CSS 3 垂直对齐的主要内容，如果未能解决你的问题，请参考以下文章