-4

I am trying to make a div sit in the direct center of another div. I tried to use margin: auto; to accomplish this, but the div only aligned in the center horizontally. How can I apply this for a center vertical align?

.topbar {
  overflow: hidden;
  width: 100%;
  height: 50px;
  background-color: #131218;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.body {
  display: block;
  width: 100%;
  height: 330px;
  background-color: blue;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

img {
  height: 50px;
  padding: 5px;
  border-radius: 200px;
  float: left;
  will-change: transform;
  animation: logofloat 1s ease-in-out infinite alternate;
}

@keyframes logofloat {
  from {
    transform: translateY(5px);
  }
  to {
    transform: translateY(15px);
  }
}

.authdiv {
  background-color: red;
  height: 200px;
  width: 200px;
  margin: auto;
}
<div class="topbar">
  <img class="logo" src="https://dummyimage.com/50x50/fff/000.png&text=Logo">
</div>
<div class="body">
  <div class="authdiv"></div>
</div>
Daniel Sixl
  • 2,488
  • 2
  • 16
  • 29
TTV jokzyz
  • 349
  • 1
  • 3
  • 13
  • adding a codesandbox/working preview will help to resolve the problem quickly. – ParthS007 Apr 06 '20 at 09:35
  • @AnuragSrivastava Unfortunately, no. I was able to center the div horizontally. My issue is trying to center it vertically – TTV jokzyz Apr 06 '20 at 09:38
  • 2
    Does this answer your question? [Center div horizontally and vertically inside another div](https://stackoverflow.com/questions/18478216/center-div-horizontally-and-vertically-inside-another-div) But there are far too many same questions with same answers, found by just searching SO, and which should almost all be closed as duplicates like this one. – Rob Apr 06 '20 at 09:45

2 Answers2

0

You could use flexbox on your containing element:

.topbar {
  overflow: hidden;
  width: 100%;
  height: 50px;
  background-color: #131218;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.body {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 330px;
  background-color: blue;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

img {
  height: 50px;
  padding: 5px;
  border-radius: 200px;
  float: left;
  will-change: transform;
  animation: logofloat 1s ease-in-out infinite alternate;
}

@keyframes logofloat {
  from {
    transform: translateY(5px);
  }
  to {
    transform: translateY(15px);
  }
}

.authdiv {
  background-color: red;
  height: 200px;
  width: 200px;
  margin: auto;
}
<div class="topbar">
  <img class="logo" src="https://dummyimage.com/50x50/fff/000.png&text=Logo">
</div>
<div class="body">
  <div class="authdiv"></div>
</div>
Daniel Sixl
  • 2,488
  • 2
  • 16
  • 29
-1

I usually put the element i want to center at 50% from top and 50% from left. Then use translate to pull the element back half it's size. So just add the 4 lines below.

.authdiv {
  background-color: red;
  height: 200px;
  width: 200px;
  margin: auto;

  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50% , -50%);
}
Rmaxx
  • 1,105
  • 11
  • 22