Question

<div style="height:100px;width:100px;border:1px solid black"></div>

如何将此div置于中心位置？

Answer 1

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

您可以找到here。

Answer 2

在该div的父级上：

div.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 3

您可以使用top: 50%; left: 50%;绝对定位该元素，然后使用translate()将其向后移动/向上移动50％自己的宽度以将其置于绝对中心。

＆＃13;

div {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

＆＃13;

<div style="height:100px;width:100px;border:1px solid black"></div>

＆＃13;

即使宽度和高度发生变化，也要将div放在页面的中心

3 个答案: