我不能让我的CSS块正确定位

问题描述：

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

但我正在努力的部分是。我想指定块的width和height，并让它位于页面的中央。

align-content: center;

作品也是如此

width: 595px; 
height: 836px;

但是当我使用的一起align content停止工作和块点在屏幕的左侧，就像没有位置设置。

这个百灵新人的任何提示？

我认为你需要使用'显示：*您所期望的垂直或水平中心flex' http://www.w3schools.com/cssref/css3_pr_align-content.asp –

*集中在网页上？或两者？ – DaniP

可能重复[如何将元素水平和垂直居中？]（http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically） – Rob

答

设置您的保证金为自动，应该居中它。

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

工作过！谢啦！ – TuckRollworthy

很高兴我能帮到你。 –

答

的align-content: center只能在flexbox布局确认here使用，所有你需要的是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>

，如果你想使用flexbox，设置display:flex和justify-content:center父

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>

我不能让我的CSS块正确定位

相关推荐