设置居中样式

在css中居中效果可以分为：水平居中、垂直居中、水平垂直居中三种。最近小程序开发项目中也经常遇到居中效果设置问题，即简单归纳，以便后期使用。

水平居中：

方法1：margin和width实现水平居中

.center {
  width: 200rpx;
  margin-left: auto;
  margin-right: auto;
  /*或者margin: 0 auto;代替*/
}

这种是最简单的，但前提必须固定宽度值，margin-left & margin-right 设置为auto。但在IE下如果web页面未明确声明“!DOCTYPE”，要保证水平居中效果，则按如下进行设置即可：

/*html*/
<div class="container">我的页面</div>

body {
  text-align: center;
}
.container {
  text-align: left;
  width: 1024px;
  margin: 0 auto;
}

方法2: text-align实现水平居中

.center {
  text-align:center;
}

这种方法适用在块级父容器中让行内(inline)或类行内(inline-block/inline-table) 和 flex类型元素居中

方法3: inline-block 和 text-align 实现多个块元素水平居中

/*设置块元素*/ 
.center {
  display: inline-block;
  width: 80rpx;
  height: 100rpx;
}
 /*设置块元素的父容器*/
.father-container {
  text-align: center; /*注意：这个必须设置*/
  width: 100%;
  height: 100rpx;
}

方法4: fixed实现浮动居中

.center {
  position: fixed;
  display: flex;
  left: 0；
  right: 0;
  bottom: 100rpx;
  margin: 0 auto;
}

方法5: flex & justify-content 实现多个子元素水平居中

.father-container {
  display: flex;
  flex-direction: row; /*默认且必为主轴方向*/
  justify-content: center;
  height: 100rpx;
}

垂直居中：

方法1: inline-height 和 height 相等

.center {
  height: 100rpx;
  line-height: 100rpx;
  white-space: nowrap;
}

这种方法适用于文本不换行的情况下使用

方法2: padding-top 和 padding-bottom 相等

.center {
  padding-top: 30rpx;
  padding-bottom: 30rpx;
}

这种方法适合于单行行内或文本元素，对于多行文本可在其父容器增加如下设置：

.father-container {
  display: table-cell;
  vertical-align: center;
}

方法3: flex & justify-content 实现多个子元素垂直居中

.father-container {
  display: flex;
  flex-direction: column;/*必须为列*/
  align-items: center;
  height: 100rpx;
}

参考资料：
CSS--项目中那些居中问题
CSS 水平对齐(Horizontal Align)
整理: 子容器垂直居中于父容器的方案
解决 flex align-items: center 无法居中(微信小程序)