我试图将标签内容垂直居中,但是当我添加CSS样式display:inline-flex
时,水平文本对齐会消失。
如何为每个选项卡同时设置文本对齐x和y?
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25%;
}
#leftFrame #tabs div {
border: 2px solid black;
position: static;
float: left;
width: 50%;
height: 100%;
text-align: center;
display: inline-flex;
align-items: center;
}
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
最佳答案
transform
translateX
/translateY
:Example Here/Full Screen Example
在supported browsers(大多数)中,可以将
top: 50%
/left: 50%
与translateX(-50%) translateY(-50%)
结合使用以动态垂直/水平居中元素。 .container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
Example Here/Full Screen Example
在supported browsers中,将目标元素的
display
设置为flex
,并使用align-items: center
进行垂直居中,并使用justify-content: center
进行水平居中。只是不要忘记为其他浏览器支持(see example)添加供应商前缀。 html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
table-cell
/vertical-align: middle
:Example Here/Full Screen Example
在某些情况下,您需要确保
html
/body
元素的高度设置为100%
。为了进行垂直对齐,请将父元素的
width
/height
设置为100%
并添加display: table
。然后对于子元素,将display
更改为table-cell
并添加vertical-align: middle
。对于水平居中,可以添加
text-align: center
以使文本居中,也可以添加任何其他inline
子元素。另外,您可以使用margin: 0 auto
,假设该元素是block
级别。 html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
<section class="parent">
<div class="child">I'm vertically/horizontally centered!</div>
</section>
50%
并位移:Example Here/Full Screen Example
此方法假定文本的高度已知-在这种情况下为
18px
。相对于父元素,只需从顶部绝对定位50%
元素即可。使用负margin-top
值,该值是元素已知高度的一半,在本例中为-9px
。 html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
<div class="container">
<p>I'm vertically/horizontally centered!</p>
</div>
line-height
方法(最不灵活-不建议):Example Here
在某些情况下,父元素将具有固定的高度。对于垂直居中,您要做的就是在子元素上设置一个
line-height
值,使其等于父元素的固定高度。尽管此解决方案在某些情况下可以使用,但值得注意的是,当有多行文本-like this时,它将无法使用。
.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
<div class="parent">
<span class="child">I'm vertically/horizontally centered!</span>
</div>