Centring a pop-up/modal

I have created a pop-up/modal thingy which works fine, but I’d like to centre it horizontally and vertically on the page. I’ve tried playing with flex but can only get it in the middle if there’s no content on the page :upside_down_face:

My initial codepen.

I’d do it like this:

.boxHolder{
  position: fixed;
  top: 0;
  right:0;
  left:0;
  min-height:100vh;
  display:flex;
  align-items:center;
 justify-content:center;
}
#infobox {
  position:relative;
  font-size: 1.04rem;
  text-align: center;
  width: 340px;
  padding: 0 .75em;
  opacity: 0;
  border: solid 1px black;
  color: black;
  background-color: white;
}
3 Likes

Thanks @PaulOB. I was almost there I think but I would never have thought of using

2 Likes