.css-center p {
  width: 300px;
}
.css-center-dt {
  display: table;
}
.css-center-dc {
  display: table-cell;
}
/*
 * 居中元素父元素样式
 */
.css-center-parent-rec{
  margin-bottom: 10px;
  border: 1px solid #333;
  width: 300px;
  height: 186px;
}

.css-center-parent-rec-lh{
  line-height: 186px;
}

.css-center-parent-flex-justify {
  justify-content: center;
}

.css-center-parent-flex-align {
  align-items: center;
}

/*
 * 居中元素样式
 */
.css-center-rec {
  border: 1px solid #333;
  width: 100px;
  height: 62px;
}

/*
 * 居中元素居中相关样式
 */
.css-center-parent-before:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.css-center-parent-before {
  font-size: 0;
}
.css-center-rec-pos-justify1 {
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

.css-center-rec-pos-justify2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.css-center-rec-pos-align1 {
  position: absolute;
  top: 50%;
  margin-top: -31px;
}

.css-center-rec-pos-align2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.css-center-rec-va {
  vertical-align: middle;
}

/* css-center-auto.html page style */
.css-center-auto-parent-rec {
  font-size: 0;
}
.css-center-auto-parent-rec:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.css-center-auto-rec {
  display: inline-block;
  border: 1px solid #333;
}
.css-center-auto-flex {
  justify-content: center;
  align-items: center;
}
.css-center-auto-pos {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.css-center-auto-rec-wrap {
  vertical-align: middle;
  text-align: center;
}
.fb {
  font-size: 14px;
}