我试图垂直居中我的标签内容,但当我添加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>


当前回答

来源链接

1)显示式伸缩 .child-element { 显示:flex; justify-content:中心; 对齐项目:中心; } 方法2)二维变换 .child-element { 上图:50%; 左:50%; 转换:翻译(-50%,-50%); 位置:绝对的; }

在这里查看其他方法

其他回答

另一种方法是使用表:

<div style="border:2px solid #8AC007;身高:200 px;宽度:200 px;" > <表风格= "宽度:100%;高度:100%”> < tr风格= "高度:100%”> < td风格= "高度:100%;Text-align:center">你好,这里有多行,这太长了,太棒了,伙计</td> < / tr > 表> < / < / div >

如果CSS3是一个选项(或者你有一个备用方案),你可以使用transform:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

与上面的第一种方法不同,你不想使用left:50%和负平移,因为在IE9+中有一个溢出的bug。如果使用正的右值,就不会看到水平滚动条。

网格css方法

#包装{ 位置:绝对的; 上图:0; 底部:0; 右:0; 左:0; 显示:网格; Grid-template-columns: repeat(3,1fr); Grid-template-rows: repeat(3,1fr); } .main { background - color: # 444; } < div id = "包装" > < div class = "盒子" > < / div > < div class = "盒子" > < / div > < div class = "盒子" > < / div > < div class = "盒子" > < / div > <div class="box main"></div> < / div >

为了使元素垂直和水平居中,我们还可以使用下面提到的属性。

这个CSS属性垂直对齐项目,并接受以下值:

flex-start:项目对齐到容器的顶部。

flex-end:物品与容器底部对齐。

center:物品在容器的垂直中心对齐。

baseline:项目显示在容器的基线。

拉伸:物品被拉伸以适应容器。

这个CSS属性justify-content,用于水平对齐项目,并接受以下值:

flex-start:项目对齐到容器的左侧。

flex-end:物品对齐到容器的右侧。

center:项目在容器的中心对齐。

space-between:项目之间以相等的间距显示。

space-around:物品以等距显示。

运行此代码片段并查看垂直和水平对齐的div。

超文本标记语言 的身体, .container { 高度:100%; 宽度:100%; } .container { 显示:flex; 对齐项目:中心; justify-content:中心; } .mydiv { 宽度:80 px; } < div class = "容器" > <div class="mydiv">h & v aligned</div> < / div >