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

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

当前回答

来源链接

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

在这里查看其他方法

2019-02-12 15:29:12

其他回答

下面是获得理想结果的Flex-box方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Flex-box approach</title> <style> .tabs{ display: -webkit-flex; display: flex; width: 500px; height: 250px; background-color: grey; margin: 0 auto; } .f{ width: 200px; height: 200px; margin: 20px; background-color: yellow; margin: 0 auto; display: inline; /*for vertically aligning */ top: 9%; /*for vertically aligning */ position: relative; /*for vertically aligning */ } </style> </head> <body> <div class="tabs"> <div class="f">first</div> <div class="f">second</div> </div> </body> </html>

2016-03-13 13:46:27

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

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

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

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

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

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

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

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

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

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

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

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

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

2017-02-21 08:53:38

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

如果你喜欢它没有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;
}

2020-01-15 09:02:27

使div在垂直和水平方向居中最简单的方法如下:

< span style=" font - family:宋体;宽度:200 px;身高:200 px;边框:1px纯黑色;" > < span style=" font - family:宋体;vertical-align:中间;text-align:中心;" > 文本在这里 < / div > < / div >

再举一个例子:

.parent {
    display: table; 
    width: 100%; 
    height: 100%;
}

.child {
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}


<div class="parent">
    <div class="child">
        <h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
    </div>
</div>

2019-01-21 14:44:23

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

推荐文章

最新文章

标签