[分享]css内容水平垂直居中显示

CSS（Cascading Style Sheets）是构建现代网页时必不可少的语言。它可以控制网页中所有的样式，包括字体、颜色、边距、布局等。其中，最常用的样式就是内容的水平和垂直居中，下面我们来详...

CSS（Cascading Style Sheets）是构建现代网页时必不可少的语言。它可以控制网页中所有的样式，包括字体、颜色、边距、布局等。其中，最常用的样式就是内容的水平和垂直居中，下面我们来详细了解一下。

/*
  水平居中：
  1. 设置元素的宽度。
  2. 设置margin-left和margin-right为auto。
*/

div {
  width: 200px;        /* 设置元素宽度 */
  margin-left: auto;   /* 左右margin设置为auto */
  margin-right: auto;  /* 左右margin设置为auto */
}

/*
  垂直居中：
  1. 父元素设置display: flex;和align-items: center;
  2. 父元素设置position: relative;子元素设置position: absolute;
  3. 父元素设置line-height等于自身高度。
*/

/* 方法一：使用Flex布局 */
.container {
  display: flex;            /* 父元素设置display: flex; */
  align-items: center;      /* 父元素设置align-items: center; */
  height: 200px;            /* 父元素设置高度 */
}

.container img {
  max-width: 100%;
}

/* 方法二：使用绝对定位 */
.container {
  position: relative;       /* 父元素设置position: relative; */
  height: 200px;            /* 父元素设置高度 */
  line-height: 200px;       /* 父元素设置line-height等于自身高度 */
}

.container img {
  position: absolute;       /* 子元素设置position: absolute; */
  top: 50%;                 /* 子元素设置top: 50%; */
  left: 50%;                /* 子元素设置left: 50%; */
  transform: translate(-50%,-50%);  /* 子元素设置transform: translate(-50%,-50%); */
} 

当然，以上只是最基本的方法。在实际使用中可能因为各种因素导致上述方法不可用，不过不要紧，CSS相当灵活，不断尝试和尝试总会有解决方案的。