Question

我在Codepen上尝试使用CSS中的一些东西（jst以便更熟悉CSS），并遇到了一个我无法垂直居中的问题。这使我感到困惑，因为我能够将所有的孩子移动到中心。谢谢你的帮助！

https://codepen.io/Shayodonn10/pen/xWKgda

＆＃13;

.bg{
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: black;
  width: 800px;
  height: 800px;
  left: 50%;
}
.red {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  width: 100px;
  height: 75px;
  background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}

.blue{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 50px;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);;
  top: 50px;
}

.green{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 50px;
  background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
  top: 50px;

}

.stick{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30px;
  height: 80px;
  background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
  top: 50px;
}

＆＃13;

<div class="bg">
<div class="red" />
<div class="blue" />
<div class="green" />
<div class="stick" />
</div>

＆＃13;

Answer 1

对你的css进行一些更改并添加一个包装div（和修复语义）你可以用flex实现效果

有关FLEX

的更多信息

有很多关于flex的好指南，this是我的GOTO

Comment

.bg{
  display: flex;
  background-color: black;
  width: 800px;
  height: 800px;
  justify-content:center;
  flex-direction:column;
}
.red {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  width: 100px;
  height: 75px;
  background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}

.blue{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 50px;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);;
  top: 50px;
}

.green{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 50px;
  background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
  top: 50px;

}

.stick{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30px;
  height: 80px;
  background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
  top: 50px;
}

Answer 2

垂直居中一直是CSS中的一个问题。但是您可以使用一些选项来集中它。

选项1

使用flexbox：

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

选项2

使用已知元素高度的position:absolute：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

选项3

使用元素未知高度的position:absolute：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

选项4

这个不是推荐！使用表格：

.parent_wrap {
  display: table;
}
.parent {
  display: table-cell;
  vertical-align:middle;
}

Answer 3

你的笔有些问题。

div不是自我关闭的。您必须有结束标记
div已经是块级别，因此您无需指定

您可以使用flexbox进行垂直居中。我在这里拍了一张照片 - https://codepen.io/chetansastry/pen/JLPWLY

Answer 4

像这样的影响：

<强> CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

<强> HTML

<div class="cn"><div class="inner">your content</div></div>

我如何垂直居中儿童div？

4 个答案: