Html 使用 CSS 3 垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5412912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align vertically using CSS 3
提问by tho
With CSS 3, are there any way to vertically align an block element? Do you have an example? Thank you.
使用 CSS 3，有没有办法垂直对齐块元素？你有例子吗？谢谢你。
回答by Charlie
Was looking at this problem recently, and tried:
最近在看这个问题，并尝试：
HTML:
HTML：
<body>
<div id="my-div"></div>
</body>
CSS:
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%);
}
Here's the Fiddle:
这是小提琴：
It even works when using "width/height: auto", in the place of fixed dimensions. Tested on the latest versions on Firefox, Chrome, and IE (* gasp *).
它甚至可以在使用“宽度/高度：自动”代替固定尺寸时起作用。在 Firefox、Chrome 和 IE 上的最新版本上进行测试 (* 喘不过气 *)。
回答by Crashalot
Note:This example uses the draft version of the Flexible Box Layout Module. It has been superseded by the incompatible modern specification.
注意：此示例使用弹性框布局模块的草稿版本。它已被不兼容的现代规范所取代。
Center the child elements of a div box by using the box-align and box-pack properties together.
通过一起使用 box-align 和 box-pack 属性将 div 框的子元素居中。
Example:
例子：
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;
}
回答by Andrii Nemchenko
Using Flexbox:
使用弹性盒：
<style>
.container {
display: flex;
align-items: center; /* Vertical align */
justify-content: center; /* Horizontal align */
}
</style>
<div class="container">
<div class="block"></div>
</div>
Centers blockinside containervertically (and horizontally).
中心block内container垂直（和水平）。
Browser support: http://caniuse.com/flexbox
浏览器支持：http: //caniuse.com/flexbox
回答by HandiworkNYC.com
a couple ways:
几种方式：
1. Absolute positioning-- you need to have a declared height to make this work:
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. Use display: table http://jsfiddle.net/B7CpL/2/*
* 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
}
- A more detailed tutorial using display: table
- 使用 display: table 的更详细教程
回答by Edouard Kombo
There is a simple way to align vertically and horizontally a div in css.
有一种简单的方法可以在 css 中垂直和水平对齐 div。
Just put a height to your div and apply this style
只需为您的 div 设置一个高度并应用此样式
.hv-center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Hope this helped.
希望这有帮助。
回答by Mr Neo
I always using tutorial from this articleto center things. It's great
我总是使用本文中的教程来居中。这很棒
div.container3 {
height: 10em;
position: relative } /* 1 */
div.container3 p {
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
transform: translate(0, -50%) } /* 4 */
The essential rules are:
基本规则是：
- Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
- Make the element itself absolutely positioned.
- Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)
- Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)
- 使容器相对定位，即声明它是绝对定位元素的容器。
- 使元素本身绝对定位。
- 将它放在容器的中间，用“顶部：50%”。（请注意，此处的 50%' 表示容器高度的 50%。）
- 使用平移将元素向上移动其自身高度的一半。（“translate(0, -50%)”中的“50%”指的是元素本身的高度。）
回答by Mr.G
Try this also work perfectly:
试试这个也很完美：
html:
html：
<body>
<div id="my-div"></div>
</body>
css:
css：
#my-div {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
background: red;
display: table-cell;
vertical-align: middle
}
回答by Dave
You can vertically align by setting an element to display: inline-block, then setting vertical-align: middle;
你可以通过设置一个元素来显示垂直对齐：inline-block，然后设置vertical-align:middle;
