将div放在页面中心，同时与另一个div内联

Question

我需要将一个元素对齐到屏幕的中心，同时在其左边有一个元素。

我可以通过向左浮动并设置中心元素的填充以匹配浮动元素的宽度来实现此目的。但是，在这种情况下，我不会总是知道宽度。

我不知道如何更好地解释这一点。搜索失败了。

Answer 1

您可以使用css flex获取相同的flex Guide

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.box-1 {
  padding: 2%;
  background: tomato;
  flex: 0 0 10%;
}

<div class="wrapper">
  <div class="box-1">1</div>
  <div class="box-1">2</div>
</div>