在不同系统上使用相同外观的方法是什么？

Question

我正在开发一个网页，为此我放置了两个按钮，使其位置相对并使用

将它们放在中心位置

position : relative
top : 100px;
left:400px;
width:200px;

现在，它在我的系统上看起来不错，但我非常确定在具有不同尺寸的系统上，外观会变得紧张。此外，分辨率将改变我的按钮的位置。

使其适用于所有设备的最佳方法是什么。我不能做类似的事情，而不是提到我希望它移动的确切像素，也许放一个百分比或者其他东西。我不知道该怎么做。

由于

Answer 1

Working demo

<强> HTML：                        

<强> CSS：

#parent {
  text-align: center;
  width: 600px;
  background: grey;
}
.child {
  display: inline-block;
  width: 120px;
  height: 100px;
  margin-top: 30px;
}
.child:first-child {
  background: teal;
}
.child:last-child {
  background: steelblue;
}