在 CSS 中为水平和垂直对齐创建单独的规则

Question

plunkr 链接是https://plnkr.co/edit/mv3lL1vwu2LxoeFZw0TX

我想将div 放置在页面的中心（垂直和水平）。 div 有一个按钮，应该在div 的中心。我在Vertically center in viewport using CSS 找到了一个解决方案，但它对我不起作用。另外，我想创建两条单独的规则，一条用于垂直对齐，一条用于水平对齐，并将它们一起（或单独）使用，以便我可以选择哪个元素应该以哪种方式对齐。

我不想使用 Flex、Bootstrap 等，因为我正在尝试理解 CSS 概念。

水平对齐规则很简单。

.center-horizontally-common-styles {
    display: block;
    margin: auto auto;
}

垂直对齐规则是（修改自SO链接）

.centre-vertical-common-styles {
   position: fixed;
    right: 50%; 
    top: 50%; 
    transform: translateY(-50%);
    transform: translateX(50%);
}


.debug-border-common-styles {
    border: 3px solid black;
    height:40px;
    width:200px;
}

HTML

<div class="debug-border-common-styles centre-vertical-common-styles center-horizontally-common-styles">
    <button type="button"> Click Me! </button>
</div>

我的理解是right: 50%; top: 50%; 将使用浏览器的窗口（视口？）作为参考，并将div 的上边缘和右边缘移动到浏览器各自边缘位置的 50% 标记的位置。 TranslateY 和 TranslateX 现在应该分别向上 (-50%) 和向左 (50%) 移动 div 以将按钮的中心对齐到页面的中间，从而使按钮居中。我面临的问题是：

1) translateY 似乎不起作用。如果我将div 的高度更改为 200px。 div 开始向下增长（即它的顶部边缘似乎是固定的！）如果宽度更改为 200 像素，则不会发生这种情况。

.debug-border-common-styles {
    border: 3px solid black;
    height:200px;
    width:200px;
}

2) div 内的按钮不在 div 的中心。我为该按钮创建了以下css 规则，但 translateY 似乎也不适用于该按钮。

.centre-button-vertical-common-styles {
   position: absolute; /*use absolute so that the origin is no the parent div*/
   right: 50%; 
   top: 50%; 
   transform: translateY(-50%);
   transform: translateX(50%);
}

3) 理想情况下，我想创建两个单独的规则，例如 .center-vertical 和 .center-horizo​​ntal 并将它们组合起来以使用所需的效果。但是，如果我执行以下操作，它将不起作用。是否可以创建两个单独的规则？

.center-horizontally-common-styles {
    display: block;
    margin: auto auto;
}

不要在这里使用，因为水平线应该把项目放在中间

.centre-button-vertical-common-styles {
   position: absolute;
   top: 50%; 
   transform: translateY(-50%);
}

Answer 1

兄弟，你需要一些风格的箭头。这样做:)

 .centre-vertical-common-styles {
       position: fixed;
        left: 50%; 
        top: 50%; 
        transform: translate(-50%, -50%);
    }
    .debug-border-common-styles {
        border: 3px solid black;
        height:40px;
        width:200px;
        display:flex;
        align-items:center;
        justify-content:center;
    }