CSS 居中、水平和垂直对齐-猿码集

1. CSS 居中

在Web开发中，经常需要对元素进行居中处理，常见的有水平居中和垂直居中。CSS 实现元素居中的方法有很多，这里介绍几种常见的方法。

1.1 水平居中

对于一个块级元素，使其水平居中，有以下几种方法：

1.1.1 text-align 属性

将父元素的 text-align 设置为 center，子元素必须为行内元素或者 inline-block，如下述代码：


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

1.1.2 margin 属性

设置父元素的 width 宽度，子元素的 margin 属性为 auto，如下述代码：


.parent{
  width: 200px;
}
.child{
  margin: 0 auto;
}

1.1.3 flex 布局

使用 flex 布局，将父元素的 display 设置为 flex，justify-content 属性设置为 center，如下述代码：


.parent{
  display: flex;
  justify-content: center;
}
.child{
  //子元素样式
}

1.2 垂直居中

对于一个块级元素，使其垂直居中，有以下几种方法：

1.2.1 table 属性

将父元素的 display 设置为 table，子元素的 display 设置为 table-cell，vertical-align 属性设置为 middle，如下述代码：


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

1.2.2 position 属性

设置父元素的 position 为 relative，子元素的 position 为 absolute，top 和 left 属性均为 50%，transform 属性中的 translateY(-50%) 将子元素向上移动子元素高度的一半，如下述代码：


.parent{
  position: relative;
  height: 300px;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
}

1.2.3 flex 布局

使用 flex 布局，将父元素的 display 设置为 flex，align-items 属性设置为 center，如下述代码：


.parent{
  display: flex;
  align-items: center;
}
.child{
  //子元素样式
}

2. CSS 水平对齐

在Web开发中，常常需要对文字、图片等内容进行水平对齐，以下介绍几种实现方法。

2.1 text-align 属性

text-align 属性用于对齐块级元素内部的文本，取值范围有 left、right、center、justify，如下述代码：


.container{
  text-align: center;
}

2.2 display: inline-block;

通过 display: inline-block; 属性可以将块级元素转化为行内块元素，从而实现居中对齐，如下述代码：


.container{
  text-align: center;
}
.item{
  display: inline-block;
}

2.3 margin 属性

使用 margin 属性设置元素的左右 margin，使其居中对齐，如下述代码：


.container{
  width: 300px;
}
.item{
  margin: 0 auto;
}

3. CSS 垂直对齐

在 Web 开发中，常常需要对文字、图片等内容进行垂直对齐，以下介绍几种实现方法。

3.1 line-height 属性

通过设置 line-height 属性，使文字垂直居中对齐，如下述代码：


.container{
  line-height: 300px;
}

3.2 vertical-align 属性

通过设置 vertical-align 属性，实现图片与文字垂直居中对齐，如下述代码：


.container{
  line-height: 300px;
}
.img{
  display: inline-block;
  vertical-align: middle;
}

3.3 flex 布局

使用 flex 布局，设置 align-items 属性为 center，实现子元素垂直居中，如下述代码：


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

总结：

以上就是实现元素居中、水平、垂直对齐的一些常用方法。在实际开发中，我们可以根据实际情况选择相应的方法进行使用。

CSS 居中、水平和垂直对齐