CSS vertical-align:中间不起作用

Question

我试图将一个span或div元素垂直居中于另一个div元素中.但是,当我放vertical-align: middle,没有任何反应.我试过改变这display两个元素的属性,似乎什么都没有用.

这就是我目前在我的网页上所做的事情:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

这是一个实现的jsfiddle,表明它不起作用:http://jsfiddle.net/gZXWC/

Answer 1

这似乎是最好的方式 - 自我原来的帖子已经过去一段时间了,这就是现在应该做的事情:http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

您还可以使用以下内容:

使用CSS3:

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Answer 2

试试这个,对我很有用:

/* 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;

Answer 3

使用CSS3:

<div class="outer">
   <div class="inner"/>
</div>

CSS:

.outer {
  display : flex;
  align-items : center;
  justify-content: center;
}

注意:这可能不适用于旧的IE

Answer 4

将行高设置为与包含div相同的高度也可以

演示http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

Answer 5

如果你不能依靠Flexbox的...将.child进入.parent的中心.当像素大小未知(换句话说,总是)并且IE9 +也没有问题时工作.

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

Answer 6

你应该穿上vertical-align: middle内部元素,而不是外部元素.line-height在外部元素上设置属性以匹配height外部元素.然后设置display: inline-block并line-height: normal在内部元素上.通过这样做,内部元素上的文本将以正常的行高度换行.适用于Chrome,Firefox,Safari和IE 8+

HTML

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

CSS

.main {
    height: 72px;
    line-height:72px;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

小提琴

Answer 7

我使用它来对齐包装div中心的所有东西,以防它帮助任何人 - 我发现它最简单:

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

Answer 8

这里有两种垂直对齐方式的示例.我使用它们并且它们工作得很好.一个是使用绝对定位,另一个是使用flexbox.

垂直对齐示例

使用flexbox,您可以display: flex;使用另一个元素将元素自身对齐align-self.如果您还需要水平对齐它,则可以在容器中使用align-items和justify-content.

如果您不想使用flexbox,则可以使用position属性.如果使容器相对且内容为绝对,则内容将能够在容器内自由移动.因此,如果您在内容中使用top: 0;和left: 0;,它将位于容器的左上角.

然后,要对齐它,您只需要将顶部和左侧引用更改为50%.这会将内容从内容的左上角定位到容器中心.

因此,您需要更正此内容将其大小的一半内容翻译为左侧和顶部.

Answer 9

这是一种现代方法，它利用了 CSS Flexbox 功能。您现在可以通过将这些样式添加到.main容器中来垂直对齐父容器中的内容

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; // To center align it horizontally as well
}

您还可以使用CSS Grids（一种基于二维网格的布局系统）。

.main {
  display: grid;
  justify-content: center;
  align-content: center;
}

你很高兴去！

Answer 10

这是一篇关于如何垂直对齐的好文章..我喜欢浮动方式。

http://www.vanseodesign.com/css/vertical-centering/

HTML：

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

以及相应的样式：

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

Answer 11

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

#myparent {
  display: table;
}
#mychild {
  display: table-cell;
  vertical-align: middle;
}

我们将父div设置为表格,将子div设置为表格单元格.然后我们可以在子div上使用vertical-align并将其值设置为middle.这个子div中的任何内容都将垂直居中.