水平垂直居中的几种方式

文章目录

  • 水平垂直居中
    • 一、实现水平垂直居中的方式
    • 二、具体实现
      • 元素定宽高
        • 利用定位 + calc
        • 利用定位 + margin:负值
      • 元素不定宽高
        • 利用定位 + margin:auto
        • 利用定位 + transform
        • flex 布局
        • grid 布局
        • table 布局
    • 另:行内元素水平垂直居中
    • 参考资料

水平垂直居中

一、实现水平垂直居中的方式

元素定宽高(知道元素宽高)

  • 利用定位 + calc
  • 利用定位 + margin:负值

元素不定宽高(不知道元素宽高)

  • 利用定位 + margin:auto
  • 利用定位 + transform
  • flex 布局
  • grid 布局
  • table 布局

二、具体实现

元素定宽高

利用定位 + calc

"outer">
"inner">
利用定位 + margin:负值

"outer">
"inner">

元素不定宽高

利用定位 + margin:auto

"outer">
"inner">
利用定位 + transform

"outer">
"inner">

缺点:兼容性不佳

flex 布局

"outer">
"inner">

缺点:兼容性不佳

grid 布局

"outer">
"inner">

缺点:兼容性不佳

table 布局

"outer">
"inner">

另:行内元素水平垂直居中

水平居中

  • 在行内元素的父元素设置:text-align: center;
  • flex布局:在行内元素的父元素设置:display: flex;justify-content: center;

垂直居中

  • 单行文本
    • line-height 设置为父元素的高度
    • flex布局:在行内元素的父元素设置:display: flex;align-items: center;
  • 多行文本
    • 在父元素设置: disaply: table-cell; vertical-align: middle; (多行文本垂直居中也适合单行文本的垂直居中)

参考资料

  • 面试官:你能实现多少种水平垂直居中的布局(定宽高和不定宽高)
  • 面试官:元素水平垂直居中的方法有哪些?如果元素不定宽高呢?

你可能感兴趣的:(HTML/CSS,css)