使用CSS Flexbox 布局水平和垂直居中

简介

使用CSS Flexbox 可以很容易地实现水平和垂直居中的布局效果。本文将讲解如何使用CSS Flexbox 布局实现水平和垂直居中的效果。

使用 Flexbox 水平居中

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

使用flex布局时，将父元素设置为display: flex，并且将justify-content属性设置为center即可实现水平居中。这会将父元素中的所有子元素沿着主轴居中对齐。这里的主轴是flex容器的方向（默认为水平方向）。

使用 Flexbox 垂直居中

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

使用flex布局时，将父元素设置为display: flex，并且将align-items属性设置为center即可实现垂直居中。这会将父元素中的所有子元素沿着交叉轴居中对齐。这里的交叉轴是与主轴垂直的轴线。

使用 Flexbox 水平和垂直居中

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

要同时实现水平和垂直居中，只需将以上两个方法结合起来使用。

结语

使用CSS Flexbox 布局可以轻松实现水平和垂直居中的效果，同时能够适应不同分辨率的设备，并提供更好的跨浏览器和跨平台支持。

参考链接：CSS Flexbox指南