盒子内部完美布局秘籍：轻轻松松搞定水平垂直居中方式！

2023-01-18 21:11:19

水平居中方法

在网页设计中，居中对齐小盒子是一项常见的任务。水平居中是指使小盒子在水平方向上位于父盒子的正中央。有几种方法可以实现此效果，每种方法都有其优点和缺点。

1. margin: 0 auto;

最简单、最直接的方法是使用margin: 0 auto;属性。这会将小盒子的左右margin设置为自动，这意味着浏览器将自动计算所需的margin大小，以使小盒子水平居中。这种方法适用于小盒子宽度固定且大小已知的情况。

.container {
  width: 300px;
  height: 300px;
  background-color: lightgray;
}

.child {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 0 auto;
}

2. text-align: center;

如果小盒子的内容为文本，则可以使用text-align: center;属性。这会将父盒子的文本对齐方式设置为居中，从而导致小盒子也居中对齐。这种方法适用于小盒子为内联块元素的情况。

.container {
  width: 300px;
  height: 300px;
  background-color: lightgray;
  text-align: center;
}

.child {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: blue;
}

3. flexbox

flexbox是一种强大的布局技术，它提供了更大的灵活性。要使用flexbox进行水平居中，请将父盒子的display属性设置为flex，并将justify-content属性设置为center。这将导致子元素在水平方向上居中。

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

.child {
  width: 100px;
  height: 100px;
  background-color: blue;
}

垂直居中方法

垂直居中是指使小盒子在垂直方向上位于父盒子的正中央。与水平居中类似，有几种方法可以实现此效果。

1. margin: auto;

类似于水平居中，margin: auto;属性也可以用于垂直居中。当将此属性应用于小盒子时，它会将上下margin设置为自动，从而使浏览器自动计算所需的margin大小，以使小盒子垂直居中。这种方法适用于小盒子高度固定且大小已知的情况。

.container {
  width: 300px;
  height: 300px;
  background-color: lightgray;
}

.child {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: auto;
}

2. position: absolute;

如果小盒子高度不固定或未知，则可以使用position: absolute;属性。这会将小盒子从文档流中移除，并允许您使用top和bottom属性对其进行定位。要垂直居中，请将top和bottom都设置为50%，并使用transform: translate(-50%, -50%);来将小盒子移动回其原始位置的中心。

.container {
  width: 300px;
  height: 300px;
  background-color: lightgray;
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: blue;
}

3. flexbox

flexbox也可以用于垂直居中。要使用此方法，请将父盒子的display属性设置为flex，并将align-items属性设置为center。这将导致子元素在垂直方向上居中。

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

.child {
  width: 100px;
  height: 100px;
  background-color: blue;
}