I can't get my CSS block to position correctly

Question

I have created this CS block, its a bit messy.

div.OSDCScreen .block_center {
  align-content: center;
  border: 3px solid green;
  background-image: url('../Images/OSDCBack.jpg');
  background-repeat: no-repeat;
  width: 595px;
  height: 836px;
  overflow: hidden;
}

but the part I'm struggling with is. I want to dictate the width and the height of the block and have it sit centrally on the page.

align-content: center; 

works and so does

width: 595px;
height: 836px;

But when I use the together align content stops working and the block sites on the left of the screen like there is no position set.

Any tips of a someone new to this lark?

Answer 1

the align-content: center can only be used in flexbox layout check here , all you need is margin:auto

 div { border: 3px solid green; background-image: url('//dummyimage.com/595x836'); background-repeat: no-repeat; width: 595px; height: 836px; overflow: hidden; margin: auto } 

 <div></div> 

if you want to use flexbox , you set display:flex and justify-content:center to the parent

 section { justify-content: center; display: flex } div { border: 3px solid green; background-image: url('//dummyimage.com/595x836'); background-repeat: no-repeat; width: 595px; height: 836px; overflow: hidden; } 

 <section> <div></div> </section> 

Answer 2

set your margin to auto that should center it.

div.OSDCScreen .block_center {
  align-content: center;
  border: 3px solid green;
  background-image: url('../Images/OSDCBack.jpg');
  background-repeat: no-repeat;
  width: 595px;
  height: 836px;
  overflow: hidden;
  margin 10px auto;
}