Question

基本上我试图将一个图标放在内部div的中心。在我的代码中，我在div内部的div中有一个div。我希望将文本放在最里面的div中，所以我尝试使用margin-top：50％相反，文本进一步超过了中间点。我认为最里面的div会在父div中找到中间点并相应地定位。请解释我错的原因。 THX

    <html>
<body>
<div id="container" style="height:1000px;width:100%;background-color: green;position:absolute;">

    <div id="inner" style="height:50%; width:50%; background-color: black;margin-top:50%;display:inline-block;">
        <div id="inner" style="height:50%; width:50%; background-color: yellow"></div>
    </div>
</div>
</body>

Answer 1

Fiddle

＆＃13;

        * {
          box-sizing: border-box;
        }
        .first {
          height: 500px;
          background-color: black;
          display: table-cell;
          width: 500px;
          text-align: center;
          vertical-align: middle;
        }
        
        .second {
          display: flex;
          justify-content: center;
          height: 300px;
          width: 300px;
          background-color: white;
          margin: 0 auto;
        }
        
        .third {
          align-self: center;
          height: 200px;
          width: 200px;
          background-color: green;
          padding: 25%;
        }

＆＃13;

<div class='first'>
  <div class='second'>
    <div class='third'>Text is hereby centered!</div>
  </div>
</div>

＆＃13;

Answer 2

margin-top:50%表示元素的顶部边框位于垂直部分，不会使元素居中。

要使该元素居中，最好使用相对位置，display:block用于所有元素，top:50%，left: 50%将左上角移动到父级的中心，此外transform:translate(-50%, -50%)，将其向后（向上和向左）移动一半自己的高度和宽度。

此外，父元素必须具有已定义的高度（在您的情况下为true）。这是完整代码的小提琴：

https://jsfiddle.net/49Lvzszj/1/

保证金上限与百分比不匹配父div

2 个答案: