css top bottom一起用

在CSS中，我们可以使用top和bottom属性来定义元素的定位方式。这两个属性可以一起使用，用于规定一个元素相对于其父元素的垂直位置。

Box {
  position: relative;
  top: 50%;
  bottom: 50%;
}

在上面的例子中，我们给Box元素设置了相对定位，并同时使用了top和bottom属性将其垂直居中。具体来说，top属性将元素的顶部相对于其父元素的垂直位置向下移动了50%，而bottom属性将元素的底部相对于其父元素的垂直位置向上移动了50%。

需要注意的是，当同时使用top和bottom属性时，它们的值必须相等，否则元素的高度会被拉伸或缩小。

此外，我们还可以使用像素、百分比或其他有效的长度单位来定义top和bottom属性的值。比如：

Box {
  position: absolute;
  top: 20px;
  bottom: 30%;
}

在这个例子中，我们将Box元素的顶部向下移动了20像素，并将它的底部相对于其父元素的垂直位置向上移动了30%。

总之，使用top和bottom属性可以让我们更精准地控制元素的定位方式，为页面布局带来更多的灵活性。