Question

文字center位于div的中心，如代码show下方。

.Absolute-Center { 
  display: table-cell;
  width: 100px;  
  height: 100px; 
  border:1px solid red; 
  text-align:center;
  vertical-align:middle;
  }

<div class="Absolute-Center">
    <p>center</p>
</div>

现在在position:absolute;的css中添加一行.Absolute-Center。

.Absolute-Center { 
  position:absolute;
  display: table-cell;
  width: 100px;  
  height: 100px; 
  border:1px solid red; 
  text-align:center;
  vertical-align:middle;
  }

<div class="Absolute-Center">
    <p>center</p>
</div>

center文字现在不在div的中心，为什么position:absolute;会导致这个？

Answer 1

将position: absolute提供给diplay:table-cell会强制display: block，而vertical-align: middle;不适用于块元素

<强> More Info

你可以包裹Absolute-Center

.wrap {
  position: absolute;
}
.Absolute-Center {
  display: table-cell;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  text-align: center;
  vertical-align: middle;
}

<div class=wrap>
  <div class="Absolute-Center">
    <p>center</p>
  </div>
</div>

Answer 2

您可以使用 CSS Flexbox 。

看看下面的代码：

.Absolute-Center { 
  position: absolute;
  display: flex; /* Flexbox Property */
  justify-content: center; /* Horizontal Centering */
  align-items: center; /* Vertical Centering */
  width: 100px;  
  height: 100px; 
  border:1px solid red;
}

<div class="Absolute-Center">
    <p>center</p>
</div>

希望这有帮助！

Answer 3

var it = main();
it.next(); // get it all started

上的

position: absolute中断，因此您需要display: table / table-cell使用centered / 50％高度padding的行高。

而是正确使用element's，如下所示。

使用此：

＆＃13;

flexbox

＆＃13;

.Absolute-Center {
  border: 1px solid red;
  display: flex;
  flex-flow: column nowrap;
  height: 100px;
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100px;
}

＆＃13;

为什么`position：absolute;`destroy`vertical-align：middle`？

3 个答案: