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?

I think you need to use `display:flex` http://www.w3schools.com/cssref/css3_pr_align-content.asp — Mosh Feu, Jun 21 '16 at 15:26
*centrally on the page* you expect vertical or horizontal center ? or both? — DaniP, Jun 21 '16 at 15:30
Possible duplicate of [How to center an element horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Rob, Jun 21 '16 at 15:33

dippas · Answer 1 · 2016-06-21T15:40:49.553

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>

score 1 · Accepted Answer · edited Jun 21 '16 at 15:31

1

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;
}

edited Jun 21 '16 at 15:31

Mosh Feu

28,354
16
88
135

answered Jun 21 '16 at 15:28

TSR Ward

41
4

Glad i could help. – TSR Ward Jun 21 '16 at 15:47

I can't get my CSS block to position correctly

2 Answers2