1. 第一种方式：使用Flexbox布局

• 设置父元素的样式为以下样式，即可实现元素水平垂直居中。

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

2. 第二种方式：使用绝对定位

• 父元素设置position: relative，子元素设置绝对定位，子元素相对父元素定位，子元素设置top: 50%; left: 50%，相对父元素向下向右偏移父元素的50%。子元素再transform: translate(-50%, -50%)，相对子元素自身向左向上偏移50%，这样子元素就位于父元素的中间，水平垂直居中。

  css">	.container {position: relative;}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
  

3. 第三种方式：使用表格布局

• 将父元素的样式设置为display: table;，然后将子元素设置为display: table-cell; vertical-align: middle; text-align: center;即可实现水平垂直居中。

  css">	.container {display: table;}.centered-element {display: table-cell;vertical-align: middle;text-align: center;}
  

4. 第四种方式：使用绝对定位和负边距

• 父元素设置position: relative，将子元素的position属性设置为absolute，并同时设置top、left、bottom、right属性的值都为0，并使用负边距（margin）将元素向外扩展一定的宽度和高度。

  css">	.container {position: relative;}.centered-element {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}