WebApp源码之元素上下居中-职坐标

WebApp源码之元素上下居中

白羽 2018-06-06 来源：网络阅读 495 评论 0

摘要：本文分享了WebApp源码之元素上下居中的源码， CSS3 子元素上下居中的两种方式：绝对定位+ -webkit-transform: translate(), -webkit-align-items: center; //子元素垂直居中 -webkit-justify-content: center; //子元素水平居中 display: -webkit-flex;，希望本文对大家学WEBAPP有所帮助。

HTML页面代码
<div class="content">
<div class="itme_div itme_div2">programmerdu</div>
</div>
CSS代码
.content {
  width: 100%;
  background: #089DB0;
  height: 400px;
  color: #FFFFFF;
  position: relative;
}/*方二*/.content.itme_div1 {
  -webkit-align-items: center;
  -webkit-justify-content: center;
  display: -webkit-flex;
}.content .itme_div {
  width: 50%;
  height: 50%;
  background: red;
  z-index: 3;
}/*方法一*/.content .itme_div1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道

webapp教程 webappui框架 webapp下载

本文由 @白羽发布于职坐标。未经许可，禁止转载。