使用CSS 3垂直alignment
有了CSS 3，有没有办法垂直alignment一个块元素？ 你有没有例子？ 谢谢。
最近看了这个问题，试了一下：
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%); }
这是小提琴：
它甚至在使用“宽度/高度：自动”，在固定尺寸的地方工作。 testingFirefox，Chrome和IE（* gasp *）的最新版本。
注意：本示例使用灵活框布局模块的草稿版本 。 它已经被不兼容的现代规范所取代。
通过一起使用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; }
使用Flexbox：
.container { display: flex; /* Vertical align: */ align-items: center; /* Horizontal align: */ justify-content: center; }
jsFiddle： http : //jsfiddle.net/maars/8Uyvf
浏览器支持： http : //caniuse.com/flexbox （一些浏览器需要前缀）
几个方法：
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：表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更详细的教程
有一个简单的方法来垂直和水平alignment在CSS CSS。
只要把你的div的高度，并应用这种风格
.hv-center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
希望这有助于。
我总是使用本文中的教程来集中讨论。 这很棒
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％'是指元素本身的高度。）
试试这个也完美的工作：
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 }
你可以通过设置一个元素来进行垂直alignment：inline-block，然后设置vertical-align：middle;
