【原创】水平垂直居中

图片在 DIV 中垂直居中

    <div class="notice-image">
      <img src="./images/news_title.jpeg" alt="">
    </div>

.notice-image {
  height: 55px;
  line-height: 55px;
}
.notice-image > img {
  vertical-align: middle;
}

DIV 和超链接文字垂直居中

      <div class="resource-link">
        <div>术</div>
        <a href="#">更多></a></a>
      </div>

section .resource-link div {
  width: 32px;
  height: 32px;
  font-size: 18px;
  display: inline-block;
  text-align: center;
  line-height: 32px;
}
section .resource-link a {
  display: inline;
  font-size: 16px;
  color: #748992;
}

水平垂直居中

.footer-left > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

子元素垂直居中

已知父元素高度通过 transform 实现 CSS 垂直居中。
给子元素的 position:relative，再通过 translateY 即可定位到垂直居中的位置。

    <div class="tips">
      <div>
        <div>
          <div><img src="./images/icon-msg.png" alt=""></div>
          <div>联系客服</div>
        </div>
      </div>
    </div>

.tips > div {
  width: 80px;
  height: 80px;
  border: 1px solid #e7e7e7;
  margin: 0px -1px -1px 0px;
  text-align: center;
}
.tips > div > div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

一个 DIV 在另一个 DIV 垂直居中

          <div class="link-container">
            <div class="link-left">术</div>
            <div class="link-right">
              <div>技术资源库</div>
              <div>1456</div>
            </div>
            <div>

.link-container {
  width: 130px;
  height: 50px;
  line-height: 50px;
  margin: 0 20px;
  position: relative;
}
.link-left {
  position: absolute;
  margin: auto;
  top: 0;
  right: 10;
  bottom: 0;
  left: 0;
  color: #000;
  border: 2px dashed #ff6633;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  text-align: center;
  line-height: 38px;
  font-size: 20px;
}
.link-right {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 20;
}