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

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

当前回答

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

2020-01-28 06:55:17

其他回答

要在页面中居中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 >

2016-02-04 23:06:23

下面是获得理想结果的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

2020-01-28 06:55:17

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

这个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

如果CSS3是一个选项(或者你有一个备用方案)，你可以使用transform:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

与上面的第一种方法不同，你不想使用left:50%和负平移，因为在IE9+中有一个溢出的bug。如果使用正的右值，就不会看到水平滚动条。

2015-02-05 04:41:28

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

推荐文章

最新文章

标签