css居中-前端开发必备：CSS居中技巧大揭秘

CSS居中是前端开发中常用的技巧之一，下面我将为大家介绍几种常见的CSS居中方法。

1.水平居中

在实现水平居中时，我们通常会使用以下三种方法：

使用text-align属性。将父元素的text-align属性设置为center，即可实现子元素水平居中。

例如：

.parent {
  text-align: center;

使用margin属性。将子元素的左右外边距设置为auto，即可实现水平居中。

例如：

.child {
  margin-left: auto;
  margin-right: auto;

使用flex布局。将父元素的display属性设置为flex，并将其justify-content属性设置为center，即可实现水平居中。

例如：

.parent {
  display: flex;
  justify-content: center;

2.垂直居中

实现垂直居中相对于水平居中来说稍微复杂一些，以下是两种常见的方法：

使用line-height属性。将父元素的高度和行高相等，并将其text-align属性设置为center，即可实现垂直居中。

例如：

.parent {
  height: 300px;
  line-height: 300px;
  text-align: center;

使用flex布局。将父元素的display属性设置为flex，并将其align-items属性设置为center，即可实现垂直居中。

例如：

.parent {
  display: flex;
  align-items: center;

3.水平垂直居中

whatsapp官方下载中文版：https://taishanbixiahu.com/danji/16173.html