CSS居中布局：水平居中、垂直居中、水平垂直居中

一、水平居中

1. 行内元素水平居中

对于行内元素，只需在其父元素上设置text-align:center即可实现水平居中：

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

其中，.child为行内元素的类名，.parent为其父元素的类名。

2. 块级元素水平居中

对于块级元素，可通过设置其margin-left和margin-right的值为auto来实现水平居中：

.parent {
  text-align: center;
}
.child {
  margin: 0 auto;
}

其中，.child为块级元素的类名，.parent为其父元素的类名。

1. 单行文本垂直居中

对于单行文本，可通过设置其line-height的值等于父元素的height值来实现垂直居中：

.parent {
  height: 100px;
  line-height: 100px;
}
.child {
  display: inline-block;
}

其中，.child为单行文本的类名，.parent为其父元素的类名。

2. 多行文本垂直居中

对于多行文本，可通过设置其display属性的值为table-cell，并在父元素上设置display属性的值为table和vertical-align属性的值为middle来实现垂直居中：

.parent {
  display: table;
  vertical-align: middle;
}
.child {
  display: table-cell;
}

其中，.child为多行文本的类名，.parent为其父元素的类名。

1. 绝对定位实现水平垂直居中

可通过设置子元素的position属性为absolute，并设置top、left、bottom、right属性的值为0，再将父元素的position属性设置为relative来实现水平垂直居中：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

其中，.child为子元素的类名，.parent为其父元素的类名。

2. flex布局实现水平垂直居中

可通过设置父元素的display属性的值为flex，并设置其align-items和justify-content属性的值为center来实现水平垂直居中：

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
.child {
  display: inline-block;
}

其中，.child为子元素的类名，.parent为其父元素的类名。

以上就是CSS的居中布局的介绍和相应的代码案例，希望对大家有所帮助。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

请先登录后发表评论