[Vuejs]-Flexbox align center vertical and horizontal not working properly

by

0👍

First thing is that, u were using .main instead of main in ur css.
Second thing is that, u dont need flexbox for centering ur box, 

margin:auto;

on container is enough

Check the snippet below

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  padding: 1rem;
  font-family: "Exo", sans-serif;
}

.main-parent {
  height: 100%;
  display: flex;
}

main {
  margin: auto;
}

.container {
  height: 80vh;
  width: 80%;
  border: 8px solid #3f3f3f;
}

.container__left {
  height: 100%;
  width: 100%;
  clip-path: polygon(0 0, 50% 0, 48% 100%, 0 100%);
  background-color: #1c1f24;
}
<div class="main-parent">
  <main class="container">
    <div class="container__left">
      <div>I'm Jonathan Doe</div>
      <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum v Lorem ipsumv Lorem ipsumLorem ipsumLorem ipsum v v</div>
      <ul>
        <li>one bla bla bla</li>
        <li>two bla bla bla</li>
        <li>three bla bla bla</li>
      </ul>
      <div>
        <button>first</button>
        <button>second</button>
      </div>
    </div>
    <div class="container__right">

    </div>
  </main>
</div>

Leave a comment