布局垂直居中-文本篇

拖延症太强,每次想写点东西的时候总是会想着明天写,今天强行克服了,总算是动工了,好吧,我的第一篇技术博客。
说真的css这玩意儿,很多人认为写写就行了,但在我看来这东西的复杂程度不下于js,写好真的是很难很难,各种布局都有不同的写法,写这个的原因是把常写的东西总结一下,希望给大家参考参考,同时也是对我自己的一个学习总结吧,见识不足,还请谅解。

html统一样式

<div class="text">
  <span class="pox"></span>
</div>

知道高度

1.绝对定位absolute
// 父标签用相对定位
.text1{
  position: relative;
  height: 400px;
}
// 子标签用绝对定位,然后top:50%;margin-top:负的高度的一半,ok,垂直居中达成
.pox1{
  line-height: 30px;
  position: absolute;
  top: 50%;
  margin-top: -30px;
}
2.单行文本,这个简单
// 父标签行高=父标签行高度,ok了;
.text4{
  line-height:400px;
  height: 400px;
}

不知道高度

1.table-cell,把div作为一个表格单元格使用,单元格垂直居中?so easy,用vertical-align: middle.
// 父标签
.text2{
  display: table-cell;
  vertical-align: middle;
  height: 400px;
}
// 子标签
.pox2{
  display: inline-block;
}
2.table,原理同上
// 父标签
.text3{
  display: table;
  height: 400px;
}
// 子标签
.pox3{
  display: table-cell;
  vertical-align: middle;
}
3.妙用:after占位居中,让:after占据全部高度,然后使用vertical-align:middle与:after竖直居中对齐,由于:after宽为0,看不见,就表现为pox5垂直居中了
// 父标签
 .text5{
   height: 400px;
}
.text5:after{
   content:'';
   width:0;
   height:100%;
   display:inline-block;
   vertical-align:middle;
}
// 子标签
.pox5{
   vertical-align:middle;
   display:inline-block;
}
4.display:flex,这玩儿说起来就多了,弹性盒子布局,布局爽到飞起,就是兼容性有点问题,不过加上-webkit-后能适应绝大部分游览器
// 父标签
.text6{
  display: -webkit-flex;
  display: flex;
  height: 400px;
  -webkit-align-items: center;
  align-items: center;
}
// 子标签
.pox6{
  -webkit-flex: 1;
  flex: 1;
}
5.display:-webkit-box,这个是flex的旧版本,同上
// 父标签
.text7{
  display: -webkit-box;
  -webkit-box-align:center;
  height: 400px;
}
6.transform,利用translateY(-50%);translateY(-50%)其实就是垂直向上偏移物体自身高度的一半,效果和margin-top:负的高度的一半差不多,不过不需要知道具体高度,浏览器自己计算.
// 父标签
.text8{
  position: relative;
  height: 400px;
}
// 字标签
.pox8{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
css的妙处就是可以用很多种方法实现同一个效果。

您也可能喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注