[分享]css两个盒子居中

CSS在网页设计中常用于元素样式的布局，今天我们来学习如何让两个盒子水平垂直居中。下面是实现该效果的CSS代码：.container{ : relative; } .box{ : absolute; ...

CSS在网页设计中常用于元素样式的布局，今天我们来学习如何让两个盒子水平垂直居中。下面是实现该效果的CSS代码：

.container{
  position: relative;
}

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

以上代码中，我们首先将父容器设置为相对定位，然后将子盒子设置为绝对定位。接下来，我们使用top和left属性将子盒子移到父容器的中心位置。我们同时使用transform的translate属性将盒子向上和向左移动到它们的中心。

这种方式可以应用于大多数元素，适合于居中内容，例如图片、文本、按钮等等。如果您需要让一个元素垂直居中，只需调整top属性即可。同样，如果您需要将一个元素水平居中，只需调整left属性即可。

以上就是CSS居中盒子的基本教程。通过使用该技术，您可以轻松地在网站中创建专业而美观的布局。