[分享]css中居中div中的div

CSS中居中div中的div非常实用，可以帮助你更好地布局网页。下面我们就来学习一下如何在CSS中居中div中的div。

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

首先，我们需要使用display:flex来让容器变为弹性盒子，这样子容器内的元素就可以很好地居中了。接着，我们可以使用justify-content:center和align-items:center来水平和垂直居中我们的内部div。

除了使用flex布局，我们还可以使用absolute定位实现居中。具体代码如下：

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

首先，我们需要将外层div设置为相对定位。然后，我们可以通过内部div的绝对定位，设置left:50%和top:50%将其置于外层div的中心。最后，我们使用transform:translate(-50%,-50%)来对其进行微调，确保其完整居中。

以上就是两种常用的CSS中居中div中的div的方法了。你可以根据实际情况灵活选择，为你的网页布局加分。