Question

我创建了这个CS块，它有点乱。

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停止工作时，屏幕左侧的块位置就像没有位置设置一样。

对这个云雀新手的任何提示？

Answer 1

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>

Answer 2

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

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

我无法让我的CSS块正确定位

2 个答案: