如何水平和垂直居中元素

最新推荐文章于 2025-12-18 17:13:23 发布

原创最新推荐文章于 2025-12-18 17:13:23 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

博客围绕选项卡内容的文本对齐问题展开，作者试图将选项卡内容垂直居中，但添加CSS样式后水平文本对齐消失，询问如何同时实现每个选项卡文本的水平和垂直对齐，并给出了相关解答链接。

跳到主内容

我试图将我的选项卡内容垂直居中，但是当我添加 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>

运行代码片段隐藏结果