当涉及到形状时，如何轻松地将div居中

Question

这里的新手从HTML和CSS的基础知识开始。我真的很难集中一个简单的div(在我的例子中是一个正方形(。我看了很多教程，也读了很多文章，但仍然无法真正理解"；最好的"；有这么多不同的方式，比如align-items、align-content、justify-items、justify-content，我有时会不知所措，尤其是在不同的显示器(柔性、网格、内联块等(下，更不用说父母和孩子的位置了。下面是一个我仍然不能很容易地操纵/居中的例子。HTML只是一个样板文件和一个在正文中包含类square的空白div。提前感谢大家的建议！

html {
height: 100%;
}
body {
min-height: 100%;
background-color: #162944;
}
.square {
height: 10rem;
width: 10rem;
background-color: salmon;
display: flex;
align-items:center;
justify-items: center;
align-content: center;
justify-content:center;
place-content: center;
place-items: center;
}

上面的例子已经尝试了所有可能的组合，不仅仅是你看到的，还有display:grid;和其他的。真的没有一种简单的方法可以将对象集中在页面上吗？

Answer 1

使div居中的一种方法是设置元素的宽度，然后使用margin属性将左右边距设置为auto。这将使元素在其容器内水平居中。

例如：

.element {
width: 400px;
margin-left: auto;
margin-right: auto;
}

也可以使用文本对齐特性。

.shape {
text-align: center;
}

也可以使用margin属性。

例如：

.shape {
margin: 0 auto;
}

最后，当涉及到形状时，可以使用transform属性使div居中。

例如：

.shape {
transform: translate(50%, 50%);
}

Answer 2

根据您的布局选项和想要实现的目标，使div居中可能很容易，也可能很难。

将div水平居中的最简单方法是添加width和margin: 0 auto。

水平和垂直居中div的最简单方法是使用flexboxdisplay: flex; justify-content:center; align-items:center。也可以使用display:table和display:table-cell。

最后一个选项是使用Positioning。您可以取一个div，用position:relative进行样式设置，然后添加一个height:300px、width:300px。然后在父div中添加一个子div，并使用position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:50px; width:50px进行样式设置