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


当前回答

你可以使用CSS(你的元素显示:inline-grid + grid-auto-flow: row;)网格和Flex Box(父元素显示:Flex;),

参见下面的片段

# leftFrame { 显示:flex; 身高:100 vh; 宽度:100%; } 标签# { 显示:inline-grid; grid-auto-flow:行; grid-gap: 24 px; justify-items:中心; 保证金:汽车; } html,身体{ 保证金:0; 填充:0; } < div > < div id = leftFrame > < div id = >标签 首先< div > < / div > < div >第二< / div > < / 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 */
}

对我来说,最简单和最干净的解决方案是使用CSS3属性“transform”:

.container { 位置:相对; } .container a { 位置:绝对的; 上图:50%; 变换:翻译(0 -50%); } < div class = "容器" > <a href="#">Hello world!< / > < / div >

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

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

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

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

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

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

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

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

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

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

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

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

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

将一个盒子垂直和水平居中的最好方法是使用两个容器:

外面的容器:

应有显示:表;

内容器:

应该有display: table-cell; 应该有垂直对齐:中间; 应该有text-align: center;

内容框:

应该有显示:inline-block; 应该调整水平文本对齐,除非你想让文本居中

演示:

body { margin : 0; } .outer-container { display: table; width: 80%; height: 120px; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; } <div class="outer-container"> <div class="inner-container"> <div class="centered-content"> Center this! </div> </div> </div>

看看这小提琴!

居中的:在书页中间居中的:

要将内容置于页面中央,请将以下内容添加到外部容器中:

位置:绝对; 宽度:100%; 高度:100%;

下面是一个演示:

body { margin : 0; } .outer-container { position : absolute; display: table; width: 100%; height: 100%; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; } <div class="outer-container"> <div class="inner-container"> <div class="centered-content"> Center this! </div> </div> </div>

看看这小提琴!

这应该可以

.center-div { 显示:flex; flex-direction:列; justify-content:中心; 对齐项目:中心; text-align:中心; 最小高度:100 vh; } <div class=" Center -div"> </div>