Ich kann meinen CSS-Block nicht korrekt positionieren

Question

Ich habe diesen CS-Block erstellt, es ist ein bisschen unordentlich.

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

aber der Teil, mit dem ich kämpfe, ist. Ich möchte die width und die height des Blocks diktieren und es zentral auf der Seite sitzen lassen.

align-content: center; 

Werke und so auch

width: 595px; 
height: 836px; 

Aber wenn ich die zusammen align content nicht mehr funktioniert und die Blockstellen auf der linken Seite des Bildschirms verwenden wie gibt es keine Position.

Irgendwelche Tipps von jemandem, der neu bei dieser Lerche ist?

Answer 1

Legen Sie Ihre Marge auf auto, die es zentrieren sollte.

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

Answer 2

die align-content: center kann nur in flexbox Layout-Check here verwendet werden, alles, was Sie brauchen, ist 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>

wenn Sie flexbox verwenden möchten, setzen Sie display:flex und justify-content:center an die Mutter

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>