Center a div to the page while inline with another div

Question

I need to align an element to the center of the screen while having an element to the left of it.

I can achieve this with float left and setting the padding of the center element to match the width of the floated element. But, in this case I will not always know the width.

I do not know how better to explain this. Searchs have failed me.

There are many ways. please draw how should it be done. – vsync Jun 19 '17 at 09:38 — vsync, Jun 19 '17 at 09:38

score 0 · Answer 1 · answered Jun 19 '17 at 09:36

You can use css flex to get the same 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>

Center a div to the page while inline with another div

1 Answers1