使用 CSS3垂直对齐

在 CSS3中，有没有任何方法可以使块元素垂直对齐? 你有例子吗？ 谢谢你。

105467 次浏览
小开

可以通过设置一个元素显示: inline-block 来垂直对齐，然后设置竖直对齐: Middle;

小开

注意: 此示例使用 灵活方块布局模块草图版本。它已被不兼容的现代规范 < a href = “ http://www.w3.org/TR/css-flebox-1/”rel = “ nofollow noReferrer”> 所取代。

通过同时使用 box-α 和 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;
}
小开

有几种方式:

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. 使用显示: table < a href = “ http://jsfiddle.net/B7cpL/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
}
  1. 使用 display: table 的更详细的教程

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

小开

使用 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

小开

最近正在研究这个问题，并尝试:

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 *)。

小开

试试这个也可以很好地工作:

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


}
小开

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

只需将高度设置为 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 */

基本规则是:

  1. 使容器相对定位，这将声明它是绝对定位元素的容器。
  2. 使元素自身绝对定位。
  3. 把它放在集装箱的中间，上面写着“顶部: 50%”。(注意，这里的50%’表示集装箱高度的50% 。)
  4. 使用平移将元素向上移动自身高度的一半。(‘ transation (0，-50%)’中的“50%”指的是元素本身的高度。)

提交答案