2

I want to center a div in the absolute center of the page with justify-content: center and align-items: center but the div needs to be the 100% width and height of the page to be in the absolute center.

The problem arrives when you add elements on top or at the bottom of the div, this reduces the height of the div that we want to center and is no longer at the absolute center.

Here is the page https://jsfiddle.net/nybf8tjc/1 I could just add

.typewriter{margin-top: -41px;}

to fix this but I feel like there is must be a better way to do this.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
M. GR.
  • 21
  • 3

2 Answers2

1

You can make .typewriter an absolutely positioned element and add the usual settings for centering that, like 

.typewriter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  etc.
}

In action: https://jsfiddle.net/de3rf65j/

Johannes
  • 64,305
  • 18
  • 73
  • 130
0

You can simple achieve it by using this.

div.father {
  width: 100vw;
  height: 100vw;
  
  position: absolute;
  
  display: flex;
  align-items: center;
  justify-content: space-around;
 }
 
 div.father div.child {
  width: 400px;
  height: 250px;
  
  background-color: teal;
  
  position: relative;
  }
<div class="father">
  <div class="child"></div> 
</div>

Also you can use the transform property:

div.child {
  width: 400px;
  height: 250px;
  
  margin:0;
  padding: 0;
  
  
  background-color: teal;
  
  position: absolute;
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%);
}

That should center the container you want to. Take a look https://css-tricks.com/snippets/css/a-guide-to-flexbox/