水平、垂直居中布局大全

本文总结了一下 CSS 水平、垂直居中的实现方式。在开始之前做些准备工作，HTML 代码结构如下，总共两个元素，父元素和子元素，size 是用来设置定宽定高的，后面不在重复下面的代码

<style>
body {
    background: beige;
}
.parent {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.child {
    background: green;    
}

.child.size{
    width: 100px;
    height: 100px;
}
</style>

<div class="parent">
    <div class="child size">我是孩子</div>
</div>

水平居中布局

text-align

子元素居中：父元素是块级元素，子元素是行内或行内块级元素

.parent {
  text-align: center;
  .child {
    display: inline-block;
  }
}

优点：兼容性好，简单

缺点：子元素内的字体对齐方式由于继承也会居中，如果子元素字体向左对齐要添加 text-align: left

margin + auto

子元素居中 ：元素是块级元素，margin 左右对齐

.parent {
  .child {
    margin: 0 auto;
  }
}

常用场景：具有版心左右留白居中的页面

优点：兼容性好，简单

缺点：要给出元素的宽度

float + margin auto

父元素居中：如果子元素是浮动元素，若想让子元素居中，给父元素宽度 width 设置为 fit-content , margin 设置为 0 auto

.parent {
  width: fit-content;
  margin: 0 auto;
  overflow: hidden; // BFC 清除浮动
  .child {
    float: left;
  }
}

缺点：fit-content 是 CSS3 新增加的属性，只支持 Chrome 和 Firefox 浏览器

position + transform / margin

子元素居中 ：父元素相对定位，子元素绝对定位

// 方式一
.parent {
  position: relative;
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

// 方式二
.child {
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

// 方式三
.child {
  position: absolute;
  left: calc(50% - 50px); // 新增
}

// 方式四
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
}

优点

简单，容易理解

缺点

transform IE8 浏览器不支持
absolute 子元素脱离标准文档流，父元素高度为 0 ，如果不想影响父元素后面兄弟元素布局，要给父元素添加高度

flex + justify-content

子元素居中 ：使用 flex 伸缩布局，子元素宽度默认为 auto，由内容撑开

.parent {
  display: flex;
  justify-content: center;
  .child {

  }
}

优点：简单，写法灵活

缺点：不兼容 IE9（包括IE9) 之前的版本

display - table 水平居中

display: table 使用 CSS 属性实现 table 表格布局

display: table -> table 块级元素
display: inline-table -> table 内联元素
display: table-row -> tr
display: table-cell -> td、th
display: table-header-group -> thead
display: table-row-group -> tbody
display: table-footer-group -> tfoot
display: table-column -> col
display: table-column-group -> colgroup
display: table-caption -> caption

父元素居中

.parent {
  display: table;
  margin: 0 auto;
}

常用场景：表格布局

优点：兼容到 IE8，可以和 flex 配合使用; CSS 的table属性布局更灵活，可以满足复杂的网页设计

缺点：不够语义化化，对搜索引擎不够友好，在不同浏览器呈现不一样

grid 水平居中

子元素居中

// 实现方式1
.parent {
  display: grid;
  justify-content: center;
  .child {
  }
}
// 实现方式2
.parent {
  display: grid;
  .child {
    justify-self: center;
  }
}

优点：grid 是二维网格布局，每个网格都是一个容器

缺点：grid 兼容性不是很好，不兼容 IE9(包括IE9)、QQ浏览器、百度浏览器和低版本的浏览器

垂直居中布局

height + line-height

若元素是单行文本, 可设置 line-height 等于父元素高度

优点：兼容性好，简单

缺点：只能设置单行文本，固定要高度

vertical-align

元素高度固定，若子元素是行内块级元素, 基本思想是使用 display: inline-block, vertical-align: middle 和一个伪元素让内容块处于容器中央


.parent::after, .child {
    display: inline-block;
    vertical-align: middle;
  }
.parent::after {
  content: '';
  height: 100%;
}

优点

写法很流行，能适应 IE7

缺点

不好理解

table + vertical-align

子元素居中 ：vertical-align 只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用 vertical-align , 我们需要设置父元素 display:table-cell;vertical-align:middle

.parent {
  display: table-cell;
  vertical-align: middle;
  .child {
    
  }
}

优点

元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断.

缺点

IE6~7, 甚至IE8 beta中无效.

absolute + translateY / margin

子元素居中 ：父元素相对定位，子元素绝对定位，原理和水平居中一样，只是水平外边距改为了垂直外边距

// 方式一
.parent {
  position: relative;
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

// 方式二
.child {
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

// 方式三
.child {
  position: absolute;
  top: calc(50% - 50px); // 新增
}

// 方式四
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto 0;
}

flex + align-item

子元素垂直居中

.flex-justify {
  display: flex;
  align-items: center;
  .child {
  }
}

优点：简单，写法灵活

缺点：不兼容 IE9（包括IE9) 之前的版本

grid

子元素垂直居中

// 实现方式1
.parent {
  display: grid;
  align-content: center; // 新增
  .child {
  }
}

// 实现方式2
.parent {
  display: grid;
  .child {
    align-self: center; // 新增
  }
}