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


当前回答

这是一个相关的问题,人们可能会在搜索时来到这个页面:当我想要居中一个div为“等待..”100px方形动画gif,我使用:

.centreDiv {
    position: absolute;
    top:     -moz-calc(50vh - 50px);
    top:  -webkit-calc(50vh - 50px);
    top:          calc(50vh - 50px);
    left:    -moz-calc(50vw - 50px);
    left: -webkit-calc(50vw - 50px);
    left:         calc(50vw - 50px);
    z-index: 1000; /* whatever is required */
}

其他回答

来源链接

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

在这里查看其他方法

CSS网格:位置项

最后,我们有place-items: center for CSS Grid以使它更容易。

HTML

<div class="parent">
  <div class="to-center"></div>
</div>

CSS

.parent {
  display: grid;
  place-items: center;
}

输出:

超文本标记语言 身体{ 高度:100%; } .container { 显示:网格; 名:中心; 高度:100%; } .center { 背景:# 5 f85db; 颜色:# fff; 粗细:大胆的; 字体类型:大河马字体; 填充:10 px; } < div class = "容器" > <div class="center" contenteditable>我总是超级集中在我的父母</div> < / div >

如果你喜欢它没有flexbox,网格,表格或垂直对齐:中间;

你可以:

HTML

<div class="box">
    <h2 class="box__label">square</h2>
</div>

CSS

.box {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    text-align: center;
    border: 1px solid black;
}

.box__label {
    box-sizing: border-box;
    display: inline-block;
    transform: translateY(50%);
    text-align: center;
    border: 1px solid black;
}

这是一个相关的问题,人们可能会在搜索时来到这个页面:当我想要居中一个div为“等待..”100px方形动画gif,我使用:

.centreDiv {
    position: absolute;
    top:     -moz-calc(50vh - 50px);
    top:  -webkit-calc(50vh - 50px);
    top:          calc(50vh - 50px);
    left:    -moz-calc(50vw - 50px);
    left: -webkit-calc(50vw - 50px);
    left:         calc(50vw - 50px);
    z-index: 1000; /* whatever is required */
}

如果它只是关于文本对齐,它很简单。就用这个吧:

vertical-align: middle; /* vertical centering*/
text-align: center; /* horizontal centering*/

不需要父样式。

在某些情况下,当父类有一些样式属性时,它可能会影响子类,这将无法正常工作。