Question

所以我有一个我希望在其容器中居中的div。

为此，我有以下CSS：

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    padding-bottom: 3%;
}

但似乎transform: translate(-50%,-50%);会导致内部div中内容的不透明度渲染出现错误。

请注意： https://plnkr.co/edit/R1HzsNWTRuvmzdfnArO7?p=preview

当<span>中的单词淡出时，你会注意到，（特别是按钮）div的其余部分也会产生奇怪的淡出效果，即使它们没有被动画化也是如此。当你摆脱transform: translate(-50%,-50%);时，虫子就不再出现了。

我的问题是，在维持transform: translate(-50%,-50%);时我能做些什么，或者我需要使用display:table衍生物来中心吗？

Answer 1

您会感到惊讶，但您实际上在这里寻找的是在父元素上设置text-align（在本例中为body）：

body {
    text-align: center;
}

然后，您可以删除所有.inner定位和翻译代码。但是，要将元素垂直居中，您需要在height: 50%中添加.inner：

.inner {
    width: 100%;
    padding-bottom: 3%;
    height: 50%;
}

我已经创建了一个更新的Plnkr，展示了这个here。

希望这有帮助！

Answer 2

尝试在.inner div上使用绝对居中，并向父div声明高度和position: relative;。

<html>
  <head>

    <style>
        .parent {
        height: 100%
        position: relative;
        }

        .inner{
          margin: auto;
          position: absolute;
          top: 0; left: 0; bottom: 0; right: 0;
          border: 1px solid black;
          width: 300px;
          height: 200px;
        }

    </style>

</head>
<body>

    <div class="parent">
        <div class="inner">
            <h1>Hello Code</h1>
            <p>Hello Code Paragraph</p>

        </div>
    </div>

  </body>
</html>

Absolute Positioning

Answer 3

中心import time import RPi.GPIO as GPIO PIN = 18 GPIO.setmode(GPIO.BCM) GPIO.setup(PIN, GPIO.IN, pull_up_down=GPIO.PUD_UP) while True: GPIO.wait_for_edge(PIN, GPIO.FALLING) print "Pressed" # your code的另一种方法是添加.inner

转换翻译Chrome Bug不透明度转换

3 个答案: