垂直对齐某些东西相对于它的元素尺寸的最佳方法是什么.截至目前,我只知道vertical-align：middle;在< tr>内工作良好.
解决方法
以下是3种非常好的技术,用于将容器中的子项垂直居中 – 即使您不知道子元素的高度.前2个来自
this CSS-tricks article
<div class="block">
<div class="centered">
Some text
</div>
</div>
解决方案#1：CSS表方法(FIDDLE)@H_403_3@
CSS：@H_403_3@
/* This parent can be any width and height */
.block {
display: table;
width: 100%;
background: orange;
height: 300px;
}
.centered {
display: table-cell;
text-align: center;
vertical-align: middle;
background: pink;
}
解决方案#2：伪(‘Ghost’)元素方法(FIDDLE)@H_403_3@
CSS：@H_403_3@
/* This parent can be any width and height */
.block {
text-align: center;
background: orange;
height: 300px;
}
/* The ghost,nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered,can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
background: pink;
}
解决方案#3：FlexBox(FIDDLE)@H_403_3@
(相关)CSS：@H_403_3@
.block {
background: orange;
height: 300px;
display: flex;
align-items: center;
}
