如何水平和垂直居中一个元素

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

当前回答

.align { display: flex; width: 400px; height: 400px; border: solid 1px black; align-items: center; justify-content: space-around; } .align div:first-child { width: 20px; height: 20px; background-color: red; position: absolute; } .align div { width: 20px; height: 20px; background-color: blue; } <div class='align'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

第一个子将在中心垂直和水平对齐

2017-07-21 14:19:05

其他回答

需要遵循以下新的和简单的解决方案: .centered-class { 对齐项目:中心; 显示:flex; justify-content:中心; 宽度:100大众; 身高:100 vh; ｝ < div class = " centered-class”> 我在垂直和水平的中心。 < / div >

2020-01-28 06:55:17

这是一个相关的问题，人们可能会在搜索时来到这个页面:当我想要居中一个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 */
}

2019-12-06 00:40:55

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 >

2020-07-09 14:44:31

这应该可以

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

2019-01-21 05:24:19

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

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

2015-09-28 19:12:55

如何水平和垂直居中一个元素

推荐文章

最新文章

标签