水平垂直居中布局

Mr.LRH大约 18 分钟

水平垂直居中布局

水平居中

对于水平居中，应先考虑，哪些元素有自带的居中效果。 text-align:center 针对行内内容，必须将子元素设置为 display: inline; 或者 display: inline-block;
其次就是考虑能不能用 margin: 0 auto;
实在不行就是使用绝对定位实现
移动端能用 flex ，简单方便，灵活并且功能强大

单行文本/行内元素/行内块级元素

原理：text-align 只控制行内内容(文字、行内元素、行内块级元素)相对其块父元素对齐
优点：简单快捷，兼容性非常好
缺点：
- 只对行内内容有效
- 属性会继承影响到后代行内内容
- 如果子元素宽度大于父元素宽度则无效，只有后代行内内容中宽度小于设置 text-align 属性的元素宽度的时候，才会水平居中

<template>
  <div class="parent-inline-horizontal">
    <span>子元素文字水平居中</span>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-inline-horizontal {
  text-align: center; /* 水平居中 */
  position: relative;
  padding: 20px 0;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
  font-weight: bold;
  color: #3eaf7c;
}

/* 父元素标记 */
.parent-inline-horizontal:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

单个块级元素

原理：在 margin 有节余的时候，设置 margin: 0 auto; 将会均分左右剩余空间，上下计算值为 0
优点：简单快捷，兼容性好
缺点：
- 必须定宽，并且值不能为 auto
- 宽度要小于父元素，否则无效

<template>
  <div class="parent-single-block-horizontal">
    <div class="son-single-block-horizontal">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.son-single-block-horizontal {
  width: 100px; /* 必须定宽 */
  margin: 0 auto;
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

.parent-single-block-horizontal {
  position: relative;
  padding: 20px 0;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-single-block-horizontal:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

多个块级元素

原理：先将子元素由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中
优点：简单便捷，兼容性非常好，可以兼容IE6、IE7
缺点：
- 只对行内内容有效
- 属性会继承影响到后代行内内容（子元素中的文字也会水平居中，可以在子元素中添加 text-align:left; 还原）
- 块级改为 inline-block 换行、空格会产生元素间隔

<template>
  <div class="parent-multiple-block-horizontal">
    <div class="son-multiple-block-horizontal">块级子元素1</div>
    <div class="son-multiple-block-horizontal">块级子元素2</div>
    <div class="son-multiple-block-horizontal">块级子元素3</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-multiple-block-horizontal {
  text-align: center; /* 设置行内块元素居中 */
  position: relative;
  padding: 20px 0;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-multiple-block-horizontal {
  display: inline-block; /* 子元素转换为行内块元素 */
  text-align: left; /* 父元素属性影响到后代行内内容，进行还原 */
  padding: 5px;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-multiple-block-horizontal:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

position + transform / margin

原理：父元素相对定位，子元素绝对定位，然后使用子元素使用 transform 相对于自身偏移，达到水平居中的目的
优点：
- 不管是块级还是行内元素都可以实现
- 居中元素不会对其他的产生影响
缺点：
- 代码较多
- 脱离文档流
- 使用 margin 需要知道宽高
- 使用 transform 兼容性不好（IE9+）

<template>
  <div class="parent-transform-block-horizontal">
    <div class="son-transform-block-horizontal">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-transform-block-horizontal {
  position: relative; /* 父元素相对定位 */
  height: 30px;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-transform-block-horizontal {
  position: absolute; /* 子元素绝对定位 */
  left: 50%; /* 父元素宽度一半 */
  /* 定宽高时等同于 margin-left:负自身宽度一半; */
  transform: translateX(-50%); /* 子元素自身宽度一半 */
  padding: 5px;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-transform-block-horizontal:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

flex

原理：设置当前主轴对齐方式为居中 justify-content: center
优点：功能强大；简单方便；容易理解。
缺点：PC端兼容性不好，低版本浏览器(ie6 ie7 ie8)不支持，移动端（Android4.0+）

<template>
  <div class="parent-flex-block-horizontal">
    <div class="son-flex-block-horizontal">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-flex-block-horizontal {
  display: flex; /* 指定容器为 Flex 布局 */
  justify-content: center; /* 设置当前主轴对齐方式为居中 */
  position: relative;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-flex-block-horizontal {
  padding: 5px;
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-flex-block-horizontal:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

flex + margin

原理：将子元素转换为 flex item，再设置设置子元素 margin: 0 auto 达到居中效果
缺点：低版本浏览器(IE6 IE7 IE8)不支持

<template>
  <div class="parent-flex-margin-block-horizontal">
    <div class="son-flex-margin-block-horizontal">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-flex-margin-block-horizontal {
  display: flex; /* 指定容器为 Flex 布局 */
  position: relative;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-flex-margin-block-horizontal {
  margin: 0 auto;
  padding: 5px;
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-flex-margin-block-horizontal:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

table + margin

优点：兼容性良好，IE8 以上都支持
缺点：兼容至 IE8，不支持IE6、IE7（将 div 换成 table）

<template>
  <div class="parent-table-block-horizontal">
    <div class="son-table-block-horizontal">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-table-block-horizontal {
  position: relative;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-table-block-horizontal {
  display: table;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-table-block-horizontal:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

垂直居中

对于垂直居中，最先想到的应该就是 line-height 了，但是这个只能用于行内内容
其次就是考虑能不能用 vertical-align: middle;
然后便是绝对定位，虽然代码多，但是胜在适用于不同情况
移动端兼容性允许的情况下能用 flex

单行文本/行内元素/行内块级元素

原理：line-height 的最终通过 inline box 实现的，而无论 inline box 所占据的高度是多少（无论比文字大还是比文字小），其占据的空间都是与文字内容公用水平中垂线的。
优点：简单；兼容性好
缺点：
- 只能用于单行行内内容
- 需要知道高度值

<template>
  <div class="parent-single-inline-vertical">
    <span>子元素文字垂直居中</span>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-single-inline-vertical {
  line-height: 80px; /* 垂直居中，需要知道高度值 */
  padding: 0 80px;
  position: relative;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
  font-weight: bold;
  color: #3eaf7c;
}

/* 父元素标记 */
.parent-single-inline-vertical:after {
  line-height: 1;
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

多行文本/行内元素/行内块级元素

优点：简单；兼容性好
缺点：
- 只能用于行内内容；
- 需要知道高度和最终呈现多少行来计算出 line-height 的值，建议用span包裹多行文本

<template>
  <div class="parent-multiple-inline-vertical">
    <span class="son-multiple-inline-vertical">子元素文字垂直居中子元素文字垂直居中子元素文字垂直居中子元素文字垂直居中子元素文字垂直居中子元素文字垂直居中</span>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-multiple-inline-vertical {
  height: 40px;
  line-height: 20px; /* 元素在页面呈现为2行,则 line-height 的值为 height/2 */
  padding: 20px 80px;
  position: relative;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
  font-weight: bold;
  color: #3eaf7c;
}

.son-multiple-inline-vertical {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: pre-line;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
}

/* 父元素标记 */
.parent-multiple-inline-vertical:after {
  line-height: 1;
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

图片

原理：line-height 与 vertical-align 的关系
优点：简单；兼容性好
缺点：
- 需要添加 font-size: 0; 才可以完全的垂直居中
- 需要父元素包裹 img 之间需要有换行或空格

<template>
  <div class="parent-image-vertical">
    <img class="son-image-vertical" src="https://vuepress.vuejs.org/hero.png" />
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-image-vertical {
  height: 40px;
  line-height: 40px;  
  font-size: 0;
  position: relative;
  padding: 20px 60px;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
  font-weight: bold;
  color: #3eaf7c;
}

.son-image-vertical {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  background-color: #3eaf7c;
}

/* 父元素标记 */
.parent-image-vertical:after {
  line-height: 1;
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

table-cell

原理：CSS Table，使表格内容对齐方式为 middle。通过将父元素转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置属性，使表格单元格内容垂直居中。
优点：简单；宽高不定；兼容性好（ie8+）
缺点
- 设置 tabl-cell 的元素，宽度和高度的值设置百分比无效，需要给它的父元素设置display: table; 才生效
- table-cell 不感知 margin，在父元素上设置 table-row 等属性，也会使其不感知 height；
- 设置 float 或 position 会对默认布局造成破坏，可以考虑为之增加一个父div 定义 float 等属性；
- 内容溢出时会自动撑开父元素

<template>
  <div class="parent-table-vertical">
    <div class="son-table-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-table-vertical {
  height: 80px;
  display: table-cell;
  vertical-align: middle;
  position: relative;
  padding: 0 60px;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
  font-weight: bold;
  color: #3eaf7c;
}

.son-table-vertical {
  padding: 5px;
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-table-vertical:after {
  line-height: 1;
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

position + transform / margin

原理：父元素相对定位，子元素绝对定位，然后使用子元素使用 transform 相对于自身偏移，达到水平居中的目的
优点：
- 不管是块级还是行内元素都可以实现
- 居中元素不会对其他的产生影响
缺点：
- 代码较多
- 脱离文档流
- 使用 margin 需要知道宽高
- 使用 transform 兼容性不好（IE9+）

<template>
  <div class="parent-transform-vertical">
    <div class="son-transform-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-transform-vertical {
  position: relative; /* 父元素相对定位 */
  height: 80px;
  padding: 0 80px;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-transform-vertical {
  position: absolute; /* 子元素绝对定位 */
  top: 50%; /* 父元素宽度一半 */
  /* 定宽高时等同于 margin-top:负自身高度一半; */
  transform: translateY(-50%); /* 子元素自身宽度一半 */
  padding: 5px;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-transform-vertical:after {
  line-height: 1;
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

position + margin: auto

原理：当 top 、bottom 为 0 时，margin-top 和 margin-bottom 会无限延伸占满空间并且平分
优点：简单；兼容性较好(IE8+)
缺点：脱离文档流

<template>
  <div class="parent-position-vertical">
    <div class="son-position-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-position-vertical {
  position: relative; /* 父元素相对定位 */
  height: 80px;
  padding: 0 80px;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-position-vertical {
  height: 20px;
  padding: 5px;
  position: absolute; /* 子元素绝对定位 */
  top: 0;
  bottom: 0;
  margin: auto 0;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-position-vertical:after {
  line-height: 1;
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

flex

原理：使用 Flex 设置对齐方式
优点：简单灵活；功能强大
缺点：PC端兼容性不好，移动端（Android4.0+）

<template>
  <div class="parent-flex-block-vertical">
    <div class="son-flex-block-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-flex-block-vertical {
  height: 80px;
  padding: 0 80px;
  display: flex; /* 指定容器为 Flex 布局 */
  align-items: center; /* 设置对齐方式为居中 */
  /* 或者 
  display: flex;
  flex-direction: column;
  justify-content: center; */
  position: relative;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-flex-block-vertical {
  padding: 5px;
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 或者
.parent-flex-block-vertical { display: flex; }
.son-flex-block-vertical { align-self: center; }
 */

/* 父元素标记 */
.parent-flex-block-vertical:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

伪元素

<template>
  <div class="parent-before-block-vertical">
    <div class="son-before-block-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-before-block-vertical {
  /* 重要样式 */
  height: 80px;
  /* 增强效果样式 */
  padding: 0 80px;
  position: relative;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-before-block-vertical {
  
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  /* 增强效果样式 */
  padding: 5px;
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 重要样式 */
.parent-before-block-vertical:before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle; 
}

/* 父元素标记 */
.parent-before-block-vertical:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

calc() （不推荐）

<template>
  <div class="parent-calc-block-vertical">
    <div class="son-calc-block-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-calc-block-vertical {
  /* 重要样式 */
  width: 300px;
  height: 300px;
  position: relative;
  /* 增强效果样式 */
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-calc-block-vertical {
  width: 100px;
  height: 100px;
  padding: -webkit-calc((100% - 100px) / 2);
  padding: -moz-calc((100% - 100px) / 2);
  padding: -ms-calc((100% - 100px) / 2);
  padding: calc((100% - 100px) / 2);
  background-clip: content-box;
  /* 增强效果样式 */
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-calc-block-vertical:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

inline-block

<template>
  <div class="parent-inline-block-vertical">
    <div class="son-inline-block-vertical">块级子元素</div>
    <div class="brother-inline-block-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-inline-block-vertical {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-inline-block-vertical,
.brother-inline-block-vertical {
  display: inline-block;
  vertical-align: middle;
}

.son-inline-block-vertical {
  padding: 5px;
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

.brother-inline-block-vertical {
  height: 300px;
  font-size: 0;
}

/* 父元素标记 */
.parent-inline-block-vertical:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

水平垂直居中

一般情况下，水平垂直居中，最常用的是：绝对定位加负边距，缺点就是需要知道宽高。可使用 transform ，但是兼容性不好（IE9+）
其次是绝对居中，绝对定位设置 top: 0 、 left: 0 、 right: 0 、 bottom: 0 ，设置 margin:auto; 让浏览器自动平分边距以达到水平垂直居中的目的
如果是行内/行内块级/图片这些内容，可优先考虑 line-height 和 vertical-align 结合使用，以及还有 text-align
移动端兼容性允许的情况下，使用 Flex

行内元素/行内块级元素/图片

原理：text-align: center; 控制行内内容相对于块父元素水平居中；line-height 和 vertical-align 的关系使其垂直居中；font-size: 0; 是为了消除近似居中的问题。
优点：代码简单；兼容性好（IE8+）
缺点：
- 只对行内内容有效
- 需要添加 font-size: 0; 才可以完全的垂直居中
- 需要注意父元素包裹子元素之间需要有换行或空格

<template>
  <div class="parent-inline-block-horizontal-vertical">
    <div class="son-inline-block-horizontal-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-inline-block-horizontal-vertical {
  width: 300px;
  height: 150px;
  line-height: 150px; /* 行高的值与height相等 */
  text-align: center;
  font-size: 0;  /* 消除幽灵空白节点的bug */
  position: relative;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-inline-block-horizontal-vertical {
  height: 40px;
  line-height: 40px;
  display: inline-block; /* 如果是块级元素需改为行内或行内块级才生效 */
  vertical-align: middle;
  font-size: 16px;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-inline-block-horizontal-vertical:after {
  line-height: 1;
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

position + translate / margin

原理：父元素相对定位，子元素绝对定位。top、right、bottom、left 相对于父元素尺寸，margin 或者 transform 相对于子元素自身尺寸。组合使用达到几何上的水平垂直居中。
优点：使用margin兼容性好；块级以及行内元素都可以实现
缺点：
- 代码较多
- 脱离文档流
- 使用 margin 需要知道宽高
- 使用 transform 兼容性不好（IE9+）

<template>
  <div class="parent-position-horizontal-vertical">
    <div class="son-position-horizontal-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-position-horizontal-vertical {
  width: 300px;
  height: 150px;
  position: relative;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-position-horizontal-vertical {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 定宽高时等同于 margin-left:负自身宽度一半; margin-top:负自身高度一半; */
  transform: translate(-50%,-50%);
  padding: 5px;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-position-horizontal-vertical:after {
  line-height: 1;
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

position + margin: auto

原理
- 当 top 、bottom 为 0 时，margin-top 和 margin-bottom 会无限延伸占满空间并且平分
- 当 left 、right 为 0 时，margin-left 和 margin-right 会无限延伸占满空间并且平分
优点：无需关注宽高；兼容性较好(IE8+)
缺点：脱离文档流

<template>
  <div class="parent-margin-horizontal-vertical">
    <div class="son-margin-horizontal-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-margin-horizontal-vertical {
  position: relative; /* 父元素相对定位 */
  width: 300px;
  height: 150px;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-margin-horizontal-vertical {
  width: 100px;
  height: 40px;
  line-height: 40px;
  position: absolute; /* 子元素绝对定位 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-margin-horizontal-vertical:after {
  line-height: 1;
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

flex

原理：使用 Flex 设置对齐方式
优点：简单灵活；功能强大
缺点：PC端兼容性不好，移动端（Android4.0+）

<template>
  <div class="parent-flex-block-horizontal-vertical">
    <div class="son-flex-block-horizontal-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-flex-block-horizontal-vertical {
  width: 300px;
  height: 150px;
  display: flex; /* 指定容器为 Flex 布局 */
  /* 或者 
  display: flex;
  justify-content: center;
  align-items: center; */
  position: relative;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
}

.son-flex-block-horizontal-vertical {
  margin: auto;
  padding: 5px;
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 或者
.parent-flex-block-vertical { display: flex; justify-content: center; }
.son-flex-block-vertical { align-self: center; }
 */

/* 父元素标记 */
.parent-flex-block-horizontal-vertical:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

视窗居中

原理：vh 为视口单位，视口即文档可视的部分，50vh 就是视口高度的 50/100，设置 50vh 上边距再进行偏移。
优点：简单易用
缺点：兼容性不好（IE9+，Android4.4+）

<template>
  <div class="parent-vhvw-block-horizontal-vertical">
    <div class="son-vhvw-block-horizontal-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>

.son-vhvw-block-horizontal-vertical {
  /* margin: 50vh auto 0;*/
  /* 0 如果去掉，则会多出滚动条并且上下都是50vh的margin。*/
  /* 如果去掉就给 body 加上o verflow:hidden; */
  margin: 50vh auto 0;
  margin: auto;
  padding: 5px;
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-vhvw-block-horizontal-vertical:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

table-cell

原理：CSS Table，使表格内容垂直对齐方式为 middle, 然后根据是行内内容还是块级内容采取不同的方式达到水平居中
优点：简单；适用于宽度高度未知情况；兼容性好（IE8+）
缺点：
- 设置 tabl-cell 的元素，宽度和高度的值设置百分比无效，需要给它的父元素设置 display: table; 才生效
- table-cell 不感知 margin，在父元素上设置 table-row 等属性，也会使其不感知 height
- 设置 float 或 position 会对默认布局造成破坏，可以考虑为之增加一个父 div 定义 float 等属性；
- 内容溢出时会自动撑开父元素

<template>
  <div class="parent-table-horizontal-vertical">
    <div class="son-table-horizontal-vertical">块级子元素</div>
  </div>
</template>

<script>
  export default {};
</script>

<style>
.parent-table-horizontal-vertical {
  width: 300px;
  height: 150px;
  display: table-cell;
  vertical-align: middle;
  /* 如果是行内元素就添加这个 */
  /* text-align: center; */
  position: relative;
  border: 1px solid #9aa9b2;
  border-radius: 5px;
  font-weight: bold;
  color: #3eaf7c;
}

.son-table-horizontal-vertical {
  /* 如果是块级元素就添加这个 */
  margin: 0 auto;
  padding: 5px;
  text-align: center;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-table-horizontal-vertical:after {
  line-height: 1;
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

button

原理：button 的默认样式，再把需要居中的元素表现形式改为行内或行内块级。
优点：简单方便，充分利用默认样式
缺点：
- 只适用于行内内容
- 需要清除部分默认样式
- 水平垂直居中兼容性很好，但是IE下点击会有凹陷效果

<template>
  <button class="parent-button-horizontal-vertical">
    <div class="son-button-horizontal-vertical">块级子元素</div>
  </button>
</template>

<script>
  export default {};
</script>

<style>

button.parent-button-horizontal-vertical {
  width: 300px;
  height: 150px;
  /* 修改button默认样式 */
  outline: none;
  border: none;
}

.son-button-horizontal-vertical {
  /* button 自带 text-align: center,改为行内水平居中生效*/
  display: inline-block;
  padding: 5px;
  color: #fff;
  background-color: #3eaf7c;
  border-radius: 5px;
}

/* 父元素标记 */
.parent-button-horizontal-vertical:after {
  content: "父元素";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 16px;
  font-weight: bold;
  color: #3eaf7c;
}
</style>

水平垂直居中布局

# 水平垂直居中布局

# 水平居中

# 单行文本/行内元素/行内块级元素

# 单个块级元素

# 多个块级元素

# position + transform / margin

# flex

# flex + margin

# table + margin

# 垂直居中

# 单行文本/行内元素/行内块级元素

# 多行文本/行内元素/行内块级元素

# 图片

# table-cell

# position + transform / margin

# position + margin: auto

# flex

# 伪元素

# calc() （不推荐）

# inline-block

# 水平垂直居中

# 行内元素/行内块级元素/图片

# position + translate / margin

# position + margin: auto

# flex

# 视窗居中

# table-cell

# button

水平垂直居中布局

水平居中

单行文本/行内元素/行内块级元素

单个块级元素

多个块级元素

position + transform / margin

flex

flex + margin

table + margin

垂直居中

单行文本/行内元素/行内块级元素

多行文本/行内元素/行内块级元素

图片

table-cell

position + transform / margin

position + margin: auto

flex

伪元素

calc() （不推荐）

inline-block

水平垂直居中

行内元素/行内块级元素/图片

position + translate / margin

position + margin: auto

flex

视窗居中

table-cell

button