内容位于Y和X中间

Question

我不希望我的内容沿X轴位于中间，我想要Y轴中间的内容。

在我的CSS中，我使用了以下内容来防止页面变得更大

html { overflow-y: hidden; overflow-x: hidden }

以下是我想要实现的目标。举个例子，想象一下中间的一个盒子。我相信这可以用JavaScript完成，我只是不确定如何。

因此上图显示了X和Y轴中间的方框。请不要发布如何将它放在X轴的中间位置，就像这个网站一样，这不是我想要的。

Answer 1

将div或box的CSS属性设置为..

div {
  /* These first 3 can change */
  background: red;
  width: 100px;
  height: 100px;
  /* The important stuff below */
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;

}

在JS Fiddle

中查看此操作

Answer 2

您可以使用以下函数相对于父元素沿任一轴动态居中。将父容器的overflow属性设置为hidden，并将子元素的marginTop值设置为以下值：center（子宽度，父宽度）

center= function(Win,Wout){
  return (Wout-Win)/2
}

Answer 3

你可以用尼克斯的javascript做到这一点，但CSS也是一个选择吗？如果你想用CSS垂直居中一个子元素，你可以这样做，如jsfiddle https://jsfiddle.net/bjf10vyj/所示 父位置必须是相对的，然后是孩子

position: absolute;    
top: 50%;
transform: translateY(-50%);