如何使元素水平和垂直居中-css-IT问答社区-解决你的IT疑问

如何使元素水平和垂直居中

Shadow 2月前

我正在尝试将标签内容垂直居中，但是当我添加 CSS 样式 display:inline-flex 时，水平文本对齐消失了。我怎样才能使每个标签的文本都沿 x 和 y 方向对齐？...

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

centering

帖子版权声明 1、本帖标题：如何使元素水平和垂直居中
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Shadow在本站《css》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

Zulu 2月前 0 只看Ta

引用 2楼
关于为什么当父 div 没有设置高度时 height:100% 不起作用有很多讨论。但这次我发现奇怪的是它确实适用于下面的代码，我不知道为什么。我没有设置

This question already has an answer here :

Behavior with height/minHeight and display:flex （1 个回答）

Closed 8天前 .

关于为什么在父 div 没有设置高度时 height:100% 不起作用有很多讨论。但这次我发现奇怪的是它确实可以与下面的代码一起使用，我不知道为什么。

我没有 height 为父框设置该值，因此它对 height:100% 子框不应该起作用，但是它确实起作用，并且高度值为 48px。
<div style=" display: flex; flex-direction: column; height: 200px; width: 200px; background-color: yellow; "> <div class="parent" style="background-color: black"> <div class="child" style="height: 100%; width: 100%; background-color: blue"> <span style="line-height:24px">123</span> </div> <div class="child" style="height: 100%; width: 100%; background-color: red"> <span style="line-height:24px">123</span> </div> </div> </div>
- 当我删除 span 元素时，子框没有子元素，这 height:100% 确实不起作用。
- 当我删除时 height:100% ，高度值为 24px，与行高相同，我认为这是正确的。
- 那么为什么会发生这种情况呢？
HairyHandKerchief23 2月前 0 只看Ta

引用 3楼

这里的关键点是 Flexbox 与基于内容的大小调整之间的交互。在您的示例中，.child div 的高度由其内容（span 元素）的高度决定，并且此高度用于计算 .parent div 的高度。height: 100% 之所以有效，是因为父级的高度源自其子级的内容，从而形成了一个反馈循环，使 height: 100% 看起来按预期工作。
LeoUniverse 2月前 0 只看Ta

引用 4楼
CSS 弹性框/网格方法：

此处示例 / 全屏示例

在支持的浏览器，将 display 目标元素的设置为， flex 并用于 align-items: center 垂直居中和 justify-content: center 水平居中。请记住，父容器也需要高度（在本例中为 100%）。
html, body, .container { height: 100%; } .container { display: flex; align-items: center; justify-content: center; }

<div class="container"> <span>I'm vertically/horizontally centered!</span> </div>
transform translateX / translateY 方法：

此处示例 / 全屏示例

在支持的浏览器（大多数浏览器），您可以结合使用 top: 50% / left: 50% 来 translateX(-50%) translateY(-50%) 动态地垂直/水平居中元素。
.container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

<div class="container"> <span>I'm vertically/horizontally centered!</span> </div>
table-cell / vertical-align: middle 方法：

此处示例 / 全屏示例

在某些情况下，你需要确保 html / body 元素的高度设置为 100% .

对于垂直对齐，将父元素的 width / height 为 100% 并添加 display: table 。然后对于子元素，将更改 display 为 table-cell 并添加 vertical-align: middle .

对于水平居中，您可以添加 text-align: center 以使文本和任何其他 inline 子元素居中。或者，您可以使用 margin: 0 auto ，假设元素是 block 水平的。
html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }

<section class="parent"> <div class="child">I'm vertically/horizontally centered!</div> </section>
使用位移方法从顶部 50% 绝对定位

此处示例 / 全屏示例

此方法假设文本具有已知高度 - 在此例中为 18px 。只需将元素 50% 从顶部绝对定位，相对于父元素。使用 margin-top 元素已知高度的一半的负值，在此例中为 - -9px .
html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; }

<div class="container"> <p>I'm vertically/horizontally centered!</p> </div>
方法 line-height （最不灵活 - 不建议）方法：

例如这里

在某些情况下，父元素会具有固定高度。对于垂直居中，您所要做的就是 line-height 在子元素上设置一个等于父元素固定高度的值。

虽然这个解决方案在某些情况下会起作用，但值得注意的是，当有多行文本时，它将不起作用 - 就像这样 .
.parent { height: 200px; width: 400px; background: lightgray; text-align: center; } .parent > .child { line-height: 200px; }

<div class="parent"> <span class="child">I'm vertically/horizontally centered!</span> </div>
user2314737 2月前 0 只看Ta

引用 5楼
尝试稍微不同，你就可以弄清楚发生了什么。每个 div 都占用 100% 的完整父级有效内容，即 2 个 span 内容 .
<div style="display: flex; flex-direction: column; height: 200px; width: 200px; background-color: yellow; justify-content: center;"> <div class="parent" style="width: 90%; background-color: black"> <div class="child" style="height: 100%; width: 90%; background-color: blue"> <span style="line-height:24px">123</span> </div> <div class="child" style="height: 100%; width: 90%; background-color: red"> <span style="line-height:24px">123</span> </div> </div> </div>
Peter Yang 2月前 0 只看Ta

引用 6楼

是的，这有效。我已经习惯了 css3 上的 inline-flex，所以我完全忘记了如何正确使用这种方法。我真的很感激，非常感谢。
Brill 2月前 0 只看Ta

引用 7楼

我打开了上面所有的“全屏”示例，我注意到垂直对齐在屏幕底部附近总是有点太多（分辨率为 1920x1080，标签在屏幕上的位置太低了 20 像素）。我在我的网页中实施了方法 #2，即使 div 不是全屏的，也遇到了同样的问题。这个问题在我的网页上甚至更严重。（太低了 100px）...
Simba 2月前 0 只看Ta

引用 8楼

您可能需要添加方法 6，使用 flexbox (适用于 IE9+，[90% 以上的浏览器市场覆盖率](caniuse.com/#feat=flexbox))：在父级中使用 display: flex，在子级中使用 align-self: center。
guymac 2月前 0 只看Ta

引用 9楼

我稍微改了一下方法2：jsfiddle.net/yeaqrh48/278。结果，通过降低窗口高度，文本超出范围，变得看不见了。如何解决这个问题？
Salvatore Daniele Bianco 2月前 0 只看Ta

引用 10楼

@josh-crozier 刚刚发现一个网站，其 css 中有指向你帖子的链接 xd
Thierry Lambert 2月前 0 只看Ta

引用 11楼
如果 CSS3 是一个选项（或者您有后备方案），那么您可以使用变换：
```
.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}
```
与上述第一种方法不同，您不想使用 left:50% 和负平移，因为 IE9+ 中存在溢出错误。使用正的 right 值，您将看不到水平滚动条。
mikuszefski 2月前 0 只看Ta

引用 12楼

我认为转换应该是 transform:translateX(50%)translateY(50%);。根据 Mozilla 转换文档，上述转换在语法上并不正确。
Robertmg 2月前 0 只看Ta

引用 13楼

@EirikH 不确定你在看什么，但那个语法很好（文档中也这么说）。大多数可以接受 X 和 Y 值的变换值都有一个基本函数可以同时接受两个值，还有一个专门函数可以只接受其中一个值。
Mariam Siradze 2月前 0 只看Ta

引用 14楼
下面展示了如何使用两个简单的 flexbox 属性将 n 个 div 置于两个轴的中心：
- 设置容器的高度：这里将主体设置为至少 100 个视口高度。
- align-items: center; 如果 flex 方向为行，则将块垂直居中；如果 flex 方向为列，则将块水平居中
- justify-content: space-around; 如果 flex 方向为 row，则垂直分配自由空间；如果 flex 方向为 column，则水平分配 div 元素周围的自由空间
body { min-height: 100vh; display: flex; align-items: center; justify-content: space-around; }

<div>foo</div> <div>bar</div>
Mateut Alin 2月前 0 只看Ta

引用 15楼

@Lucas 这是因为默认情况下主体的高度将等于其内容的高度（本例中为两行文本）。如果要将某个内容垂直居中，则该内容需要定义高度（100%、100px 等...）。50vh 会将元素放置在视口高度的 25% 处
B.Letz 2月前 0 只看Ta

引用 16楼
使盒子垂直和水平居中的最佳方式是使用两个容器：

外箱：
- 应该有 display: table;
內容器：
- 应该有 display: table-cell;
- 应该有 vertical-align: middle;
- 应该有 text-align: center;
内容框：
- 应该有 display: 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>
另请参阅 这个小提琴 ！

位于页面中间：

要将内容置于页面中间，请将以下内容添加到外部容器中：
- position : absolute;
- width: 100%;
- height: 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>
另请参阅 这个小提琴 ！
code_to_joy 2月前 0 只看Ta

引用 17楼
CSS Grid: place-items

最后，我们有 place-items: center 用于 CSS Grid，以使其更容易。

HTML
```
<div class="parent">
  <div class="to-center"></div>
</div>
```
CSS
```
.parent {
  display: grid;
  place-items: center;
}
```
输出：
html, body { height: 100%; } .container { display: grid; place-items: center; height: 100%; } .center { background: #5F85DB; color: #fff; font-weight: bold; font-family: Tahoma; padding: 10px; }

<div class="container"> <div class="center" contenteditable>I am always super centered within my parent</div> </div>
Will Ediger 2月前 0 只看Ta

引用 18楼

请注意，在发表此评论时，根据 canIuse，并非所有浏览器都支持 place-items。
user13964273 2月前 0 只看Ta

引用 19楼

在发表此评论时，如果您没有使用标记为绿色的浏览器，nimb.ws/dhLU5N，那么您做得就不对了。
Syrus 2月前 0 只看Ta

引用 20楼
运行此代码片段，您会看到垂直和水平对齐的 div。
html, body, .container { height: 100%; width: 100%; } .container { display: flex; align-items: center; justify-content: center; } .mydiv { width: 80px; }

<div class="container"> <div class="mydiv">h & v aligned</div> </div>