CSS实现水平垂直的几种方法

目录

• 水平居中
• 垂直居中
• 水平垂直居

一、水平居中

内联元素和块级元素实现水平居中的方法不一样，其中块级元素又分定宽和不定宽两种情况

• 内联元素水平居中
  父元素为块级元素，在父元素设置 text-align: center; 就可

代码：

效果：

• 块级元素水平居中（定宽）
  块级定宽，谁居中谁 margin: 0 auto;

代码：

效果：

• 块级元素水平居中（不定宽）
  块级不定宽，子元素设display: inline;，父元素设text-align: center;

代码：

效果：

• 使用定位属性实现水平居中
  父元素设置position: relative;，子元素设置position: absolute;、left: 50%;、margin-left: -元素宽度一半

代码：

效果

• 使用flex布局实现水平居中
  只要在父元素设置display: flex;、justify-content: center;

代码：

效果：

flex布局详见阮一峰的flex布局教程 语法篇

二、垂直居中

实现垂直居中，亦分内联元素和块级元素，其中块级元素同分定高和不定高两种情况

• 内联元素垂直居中
  单行元素，仅需设置很高等于盒子高就可；若为多行元素，则需给父元素设置display: table-cell;、vertical-align: middle;

单行代码：

效果：

多行代码：

效果：

• 块级元素垂直居中（定高）
  定宽时，使用定位实现垂直居中。父元素设置position: relative;，子元素设置display:absolute;、left: 50%;、margin-top: -一半高度

代码：

效果：

• 块级元素居中（不定高）
  不定高时，需要使用到 transform: translateY(-50%);
  代码：

效果：

• 使用flex实现垂直居中
  代码：

效果：

flex布局详见阮一峰的flex布局教程 语法篇

三、水平垂直居中

• 利用定位实现水平垂直居中
  父元素设置position: relative;，子元素设置position: absolute;

代码：

效果：

• 利用flexbox实现水平垂直居中
  父元素设置position: relative;，子元素设置position: absolute;

代码：

效果：