为什么垂直对齐:中间不工作在我的span或div?

小开

这似乎是最好的方法——从我最初的帖子到现在已经过去了一段时间，这是现在应该做的:

.main {
display: table;
  

/* optional css start */
height: 90px;
width: 90px;
/* optional css end */
}
        

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

<div class="main">
<div class="inner"> This </div>
</div>

小开

这是一个伟大的文章如何垂直对齐..

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;
}

小开

将line-height设置为包含div的相同高度也可以

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

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

小开

试试这个，对我很有效:

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

小开

因为vertical-align可以在td上正常工作，你可以在div中放入一个单格table来对齐它的内容。

<div>
<table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
Aligned content here...
</td></tr></table>
</div>

很笨重，但据我所知还能用。它可能没有其他变通方法的缺点。

小开

万一你不能依靠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>

小开

这很简单。只要在你的主类中添加display:table-cell。

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

看看这个jsfiddle!

小开

最佳答案

使用CSS3:

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

Css:

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

使用“justify-content: center”;水平对齐元素

注意:这可能无法在旧的IE中工作

小开

超文本标记语言

<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中的任何内容都将垂直居中。

小开

你应该把vertical-align: middle放在内部元素上，不放在外部元素上。设置外部元素的line-height属性以匹配外部元素的height。然后在内部元素上设置display: inline-block和line-height: normal。通过这样做，内部元素上的文本将以正常的行高换行。支持Chrome, Firefox, Safari和IE 8+

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

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

小提琴 .

小开

这里有两种方法做垂直对齐的例子。我用过，效果很好。一个使用绝对定位，另一个使用flexbox。

< a href = " http://codepen。io/timbergus/pen/BjXeQB" rel="noreferrer">垂直对齐示例 . io/timbergus/pen/BjXeQB" rel="noreferrer

使用flexbox，你可以用align-self将一个元素自身与另一个元素中的display: flex;对齐。如果你也需要水平对齐，你可以在容器中使用align-items和justify-content。

如果不想使用flexbox，可以使用position属性。如果容器是相对的，内容是绝对的，那么内容就可以在容器内自由移动。因此，如果你在内容中使用top: 0;和left: 0;，它将被定位在容器的左上角。

然后，对齐它，你只需要改变顶部和左侧的引用为50%。这将从内容的左上角开始将内容定位在容器中心。

所以你需要纠正这个，将内容的一半大小平移到左边和上面。

小开

这里是最新的最简单的解决方案-不需要改变任何东西，只需添加三行CSS规则到您的div的容器中，您希望居中。我爱Flex Box #爱flexbox

.main {
/* I changed height to 200px to make it easy to see the alignment. */
height: 200px;
vertical-align: middle;
border: 1px solid #000000;
padding: 2px;
  

/* Just add the following three rules to the container of which you want to center at. */
display: flex;
flex-direction: column;
justify-content: center;
/* This is true vertical center, no math needed. */
}
.inner {
border: 1px solid #000000;
}
.second {
border: 1px solid #000000;
}

<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 class="inner">This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
</div>

奖金

justify-content值可以设置为以下几个选项:

flex-start，它将把子div对齐到父容器中伸缩流开始的位置。在这种情况下，它将保持在顶部。

center，它将使子div与其父容器的中心对齐。这非常简洁，因为您不需要添加一个额外的div来包装所有的子容器，从而将包装器放在父容器中以使子容器居中。因此，这是true垂直中心(在column flex-direction. c中)。类似地，如果你将flow-direction更改为row，它将变成水平居中。

flex-end，它将把子div对齐到父容器中伸缩流的结束位置。在这种情况下，它将移动到底部。

space-between，它将从流的开始蔓延到流的结束。如果在演示中，我添加了另一个子div，以显示它们是展开的。

space-around，类似于space-between，但是在流的开始和结束处有的一半的空间。

小开

只需要把内容放在一个高度为100%的表中，并为main div设置高度

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

小开

我用这个来对齐包装器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>

小开

要在另一个div中垂直居中一个span或div元素，添加相对于父div的位置和绝对于子div的位置。现在，子div可以位于div内的任何位置。

<div class="parent">
<div class="child">Vertically and horizontally centered child div</div>
</div>

css:

.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

小开

这是一个现代的方法，它利用CSS Flexbox功能。现在，只要将这些样式添加到.main容器

，就可以垂直对齐父容器中的内容

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

你也可以使用CSS网格(一个二维基于网格的布局系统)。

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

下面是一个简写方法，但浏览器的支持仍然很低——https://caniuse.com/?search=place-items。

    .main {
display: grid; // flex  -  works for both
place-items: center;
}

你就可以开始了!

小开

下面设置CSS

 /*Parent*/
display: table;


/*immediate child*/
display: table-cell;
vertical-align: middle;

~拉胡尔Daksh

小开

这就是答案:

垂直对齐使元素相对于元素所在行的尺寸进行对齐。

参考:https://christopheraue.net/design/why-vertical-align-is-not-working