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


当前回答

最简单的flexbox方法:

将单个元素垂直和水平居中的最简单方法是使其成为一个伸缩项目,并将其边缘设置为auto:

如果将自动边距应用于伸缩项目,该项目将自动 扩展其指定的边距,以占用flex中的额外空间 容器……

.flex-container { 身高:150 px; 显示:flex; } .flex-item { 保证金:汽车; } < div class = " flex-container”> < div class = " flex-item”> 这个应该居中! < / div > < / div >

这种在每个方向上的边距扩展将把元素推到其容器的中间位置。

其他回答

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 >

来源链接

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

在这里查看其他方法

网格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 >

方法6

/*Change units to "%", "px" or whatever*/ #wrapper{ width: 50%; height: 70vh; background: rgba(0,0,0,.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #left{ width: 50%; height: 50vh; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; background: red; } #right{ width: 50%; height: 50vh; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; background: green; } .txt{ text-align: center; line-height: 50vh; } <div id="wrapper"> <div id="left" class="txt">Left</div> <div id="right" class="txt">Right</div> </div>

    .container{ 
               width: 50%;  //Your container width here
               height: 50%; //Your container height here
               position: absolute; 
               top: 0; 
               right: 0;  
               bottom: 0; 
               left: 0; 
               margin: auto;
    }

要在页面中居中Div,请检查fiddle链接

# vh { border - radius: 15 px; Box-shadow: 0 0 8px rgba(0,0,0,0.4); 填充:25 px; 宽度:200 px; 身高:200 px; 背景:白色; text-align:中心; 保证金:汽车; 位置:绝对的; 上图:0; 左:0; 底部:0; 右:0; } <div id="vh"> div要垂直对齐</div>

更新 另一种选择是使用flex box检查小提琴链接

.vh { background - color: # ddd; 身高:200 px; 对齐项目:中心; 显示:flex; } .vh > div { 宽度:100%; text-align:中心; vertical-align:中间; } < div class = " vh”> <div> div要垂直对齐 < / div >