CSS水平垂直居中的方法

CSS水平垂直居中

方法一：position(定位)加margin

• 父子元素都有宽高(宽高可由内容撑开)
• 给父元素开启相对定位
• 子元素开启绝对定位上下左右都设置为0，margin为auto
• 兼容性：主流浏览器均支持，IE6不支持

方法二：display:table-cell

• 父子元素都有宽高
• 父元素设置样式：
  • display: table-cell;
  • vertical-align: middle;
  • text-align: center;
• 子元素设置样式：
  • display: inline-block;
  • vertical-align: middle;
• 兼容性：由于display:table-cell的原因，IE6\7不兼容

方法三：position加transform(css3添加的样式)

• 父子元素都有宽高(宽高可由内容撑开)
• 父元素开启相对定位
• 子元素开启绝对定位后设置样式：
  • top:50%;
  • left:50%;
  • transform:translate(-50%,-50%);(通过平移自身的一半达到水平垂直居中)
• 兼容性：ie9以下不支持 transform，手机端表现的比较好。

方法四：display:flex;align-items: center;justify-content: center

• 父子元素都有宽高(宽高可由内容撑开)
• 父元素开启flex布局设置样式：
  • display: flex;
  • align-items: center;
  • justify-content: center;
• 移动端实现更好

方法五：display:flex;margin:auto

• 父子元素都有宽高(宽高可由内容撑开)
• 父级开启flex布局：display:flex;
• 子元素的margin设置为auto;
• 移动端实现更好

方法六：纯定位position

• 父子元素都有宽高
• 父元素开启相对定位
• 子元素开启绝对定位上下左右根据宽高设置相应的值达到水平垂直居中
• 或者子元素开启绝对定位上左设置为50%，margin-left和margin-top根据宽高设置相应的值达到水平垂直居中(设置为负值)
• 兼容性：适用于所有浏览器

方法七：行内块元素

• 父子元素都有宽高
• 父元素设置text-align:center;
• 子元素设置line-height:(height的值)；

转载于:https://juejin.im/post/5cebd313f265da1bb13f10b1