<div> 中垂直居中对齐

Posted 2023-03-05

【中文标题】<div> 中垂直居中对齐

【英文标题】：vertical align middle in <div>

【发布时间】：2013-09-10 01:00:48

【问题描述】：

我想将#abc div 的高度保持在50px 和文本在div 的中间垂直对齐。

body
  padding: 0;
  margin: 0;
  margin: 0px auto;


#main
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;


#abc
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

【问题讨论】：

检查这个***.com/a/65415977/6712507，在同一个帖子中，就在下面，它非常适合所有人，无需使用 fking 表

【参考方案1】：

你可以使用line-height: 50px;，那里不需要vertical-align: middle;。

Demo

---

如果您有多行，上述操作将失败，因此在这种情况下，您可以使用 span 包装您的文本，而不是使用 display: table-cell; 和 display: table; 以及 vertical-align: middle;，也不要忘记使用width: 100%; 为#abc

Demo

#abc
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;


#abc span 
  vertical-align:middle;
  display: table-cell;

---

我能想到的另一个解决方案是将transform 属性与translateY() 一起使用，其中Y 显然代表Y 轴。这很简单......您需要做的就是将元素位置设置为absolute，然后从top 将元素位置设置为50%，并从它的轴转换为负-50%

div 
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;


p 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

Demo

请注意，旧版浏览器不支持此功能，例如 IE8，但您可以分别使用 -ms, -moz 和 -webkit 前缀来制作 IE9 和其他旧版 Chrome 和 Firefox 浏览器。

更多关于transform的信息，可以参考here。

【讨论】：

如果你有长文本，这不起作用

【参考方案2】：

老问题，但现在 CSS3 使垂直对齐真的简单！

只需将以下 css 添加到 #abc：

display:flex;
align-items:center;

Simple Demo

原题演示updated

简单示例：

.vertical-align-content 
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */

<div class="vertical-align-content">
  Hodor!
</div>

【讨论】：

我还建议：display:grid;对齐项目：中心；当您有多个对象垂直对齐时，它会更好地对齐

哪些浏览器支持 CSS3?

@Kiquenet，全球市场的 92% caniuse.com/#search=align-items

【参考方案3】：

很简单：给父 div 这个：

display: table;

并给子 div(s) 这个：

display: table-cell;
vertical-align: middle;

就是这样！

.parent
    display: table;

.child
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

【讨论】：

这很糟糕，因为它使用 table 作为 hack，它可能适用于大多数情况，但是当你想更改 'table' 的宽度时，它就无法正常工作（我这个解决方案现在有问题）

我不需要将display:table;添加到父级以使其工作。

也许这是一个 hack ......但它有效，大多数其他解决方案仅在特定情况下有效，并且在我们的案例中通常不可用。

此解决方案的优势：适用于所有类型的内容（不仅适用于文本，而且不仅适用于单行...）

【参考方案4】：

我找到了 Sebastian Ekström 的这个解决方案。它很快，很脏，而且效果很好。即使你不知道父母的身高：

.element 
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

阅读全文here。

【讨论】：

这可能会使事物模糊，因为转换的结果可能导致事物被定位在半像素位置。

针对该问题的帖子有更新。父母：transform-style: preserve-3d;!

【参考方案5】：

您可以将 Line height 用作 div 的高度。 但对我来说最好的解决方案是这个 --> position:relative; top:50%; transform:translate(0,50%);

【参考方案6】：

 div 
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;


.text-align-center 
    display: flex;
    align-items: center;
    justify-content: center;

<div class="text-align-center"> Align center</div>

【讨论】：

请解释一下！

【参考方案7】：

添加line-height怎么样？

#abc
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;

Fiddle, line-height

或padding #abc。 This is the result with padding

更新

添加你的CSS：

#abc img
   vertical-align: middle;

The result。希望这就是您想要的。

【参考方案8】：

试试这个：

.main_div
    display: table;
    width: 100%;

.cells 
    display: table-cell;
    vertical-align: middle;

另一种使 div 居中的方法：

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent position: relative;

#child 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;

【参考方案9】：

此代码用于垂直居中和水平居中对齐，没有指定固定高度：

.parent-class-name 
  position: relative;


.className 
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);

【参考方案10】：

使用 translateY CSS 属性在其容器中垂直居中文本

<style>
.centertext

    position: relative;
    top: 50%;
    transform: translateY(40%);


</style>

然后将其应用到您的包含 DIV

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

调整 translateY 百分比以满足您的需要。希望这会有所帮助

【参考方案11】：

.container  
  height: 200px;
  position: relative;
  border: 3px solid green; 


.center 
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

<h2>Centering Div inside Div, horizontally and vertically without table</h2>
<p>1. Positioning and the transform property to vertically and horizontally center</p>
<p>2. CSS Layout - Horizontal & Vertical Align</p>

<div class="container">
  <div class="center">
    <p>I am vertically and horizontally centered.</p>
  </div>
</div>