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

Question

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

我想将div放置在页面的中心(垂直和水平)。div有一个按钮，应该在div的中心。我使用 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开始向下增长(即它的顶部边缘似乎是固定的！如果宽度更改为 200px，则不会发生这种情况。

.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-horizontal ，并将它们组合在一起以使用所需的效果。但是如果我做如下的事情，它不起作用。是否可以创建两个单独的规则？

.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;
}