css 公共样式 + 水平 垂直居中

没有特别的幸运，那么就特别的努力！！！

水平居中：适用于一些样式布局，特别是需求图片，等宽不等高或等高不等宽有的宽高不确定…
但最终效果——要垂直居中显示，解决方案如下:

水平居中

1.行内元素

.box{
    text-align: center;
}

2.块级元素

.info{
    margin: 0 auto;
}

3.flex布局

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

4.绝对定位定宽

.box {
    position: absolute;
    width: 宽度;
    left: 50%;
    margin-left: -0.5*宽度
}

5.绝对定位不定宽

.box{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

6.left/right: 0

.son {
    position: absolute;
    width: 宽度;
    left: 0;
    right: 0;
    margin: 0 auto;
}

垂直居中

1.行内元素

.parent {
    height: 高度;
}
.son {
    line-height: 高度;
}

2.块级元素

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

3.flex布局

.info {
    display: flex;
    align-items: center;
}

4.绝对定位定宽

.box {
    position: absolute;
    top: 50%;
    height: 高度;
    margin-top: -0.5高度;
}

5.绝对定位不定宽

.box{
    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
}

6.left/right: 0

.hammer {
    position: absolute;
    height: 高度;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

弹出层

<view class="alert">
    <view class="wrap">预约须知</view>
  </view>
  
.alert {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  -webkit-animation: fade-in ease-in-out .3s forwards;
  animation: fade-in ease-in-out .3s forwards;
}
@keyframes fade-in{
  0%{ background: rgba(0,0,0, 0);}
  50%{ background: rgba(0,0,0, 0.2);}
  100%{ background: rgba(0,0,0, 0.6);}
}
.wrap {
  position: absolute;
  z-index: 1002;
  width: 600rpx;
  background: #fff;
  left: 50%;
  top: 50%;
  transition: all .3s ease-in-out;
  transform: translate(-50%, -50%);
  border-radius: 20rpx;
  padding: 40rpx 52rpx;
}

h5 公共样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* 解决IOS默认滑动很卡的情况 */
  -webkit-overflow-scrolling : touch;
}

/* 禁止缩放表单 */
input[type="submit"], input[type="reset"], input[type="button"], input {
  resize: none;
  border: none;
}

/* 取消链接高亮  */
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
select {
  border: none;
  
}

/* 图片自适应 */
img {
  width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
  display: block;
  -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/
}

/* 初始化 */
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif;
  color: #000;
  background-color: #fff;
}
em, i {
  font-style: normal;
}
ul,li{
  list-style-type: none;
}
strong {
  font-weight: normal;
}
.clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}
.clearfix {
  zoom: 1;
}
a {
  text-decoration: none;
  color: #969696;
  font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
}
a:hover {
  text-decoration: none;
}
ul, ol {
  list-style: none;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-family: 'Microsoft YaHei';
}
img {
  border: none;
}
input{
  font-family: 'Microsoft YaHei';
}
/*单行溢出*/
.one-txt-cut{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*多行溢出 手机端使用*/
.txt-cut{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-line-clamp: 2; */
  -webkit-box-orient: vertical;
}
.txt-cut2{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.txt-cut3{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* 移动端点击a链接出现蓝色背景问题解决 */
a:link,a:active,a:visited,a:hover {
  background: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

Pc端

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body{
    width: 1920px;
    height: 1080px;
}
ul,ol,li{list-style:none;}
img,button{border:0;}
input,select,textarea{outline:none;border:none;background:none;/*background:none;Ȼ.search_textbackground:#FFF;IE6search_btnͲ*/}
textarea{resize:none;}
table{border-collapse:collapse;}
a{text-decoration:none;}
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}
.clearfix { *zoom:1; }
.fl{float:left;}
.fr{float:right;}
/*文字溢出*/
.p-eclipse{width: 100%;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;}
/* 两行省略号 */
.twoKit{
	display: -webkit-box;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
/* 除去input默认样式*/
input {
    outline:none;
    background:transparent;
    border:none;
    outline:medium;
}
*:focus { 
    outline: none;
    background-color: transparent;
}
::selection{background:transparent; }
::-moz-selection{background:transparent; }

拿着 不谢 请叫我“锤” ！！！

希望以上分享能帮到大家，祝大家在开发旅途中愉快！！！