css盒子居中方法

CSS盒子居中方法让网页设计更加美观和直观。下面介绍两种常用的盒子居中方法。

1. 使用Flexbox

.container {
  display: flex;
  justify-content: center;
 /* 水平居中 */
  align-items: center;
 /* 垂直居中 */
}
 

在这个例子中，我们使用flex布局的容器来包含我们想要居中的元素。justify-content和align-items指定了元素的水平和垂直位置。

2. 使用margin

.box {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}
 

在这个例子中，我们使用绝对定位来将元素定位在浏览器中心。left和top属性设置元素左上角的位置为屏幕中心。然后使用负margin的方式将元素向上和向左移动一半的大小，让元素实现居中。但这种方法只对确定宽高和位置的元素有效。