实现元素垂直居中的方法很多,相信大家都能说出几种。相对于PC端,移动端的方法会更多点,平时在网上收集了一些,在此贴出来分享给大家,仅供参考。
方法1:table-cell
html结构
- <div class="box box1">
- <span>垂直居中</span>
- </div>
CSS
- .box1{
- display: table-cell;
- vertical-align: middle;
- text-align: center;
- }
方法2:display:flex
- .box2{
- display: flex;
- justify-content:center;
- align-items:Center;
- }
方法3:绝对定位和负边距
- .box3{
- position:relative;
- }
- .box3 span{
- position: absolute;
- width:100px;
- height: 50px;
- top:50%;
- left:50%;
- margin-left:-50px;
- margin-top:-25px;
- text-align: center;
- }
方法4:绝对定位和0
- .box4 span{
- width: 50%;
- height: 50%;
- background: #000;
- overflow: auto;
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- }
这种方法跟上面的有些类似,但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中。不过这里得确定内部元素的高度,可以用百分比,比较适合移动端。
方法5:translate
- .box6 span{
- position: absolute;
- top:50%;
- left:50%;
- width:100%;
- transform:translate(-50%,-50%);
- text-align: center;
- }
这实际上是方法3的变形,移位是通过translate来实现的。
方法6:display:inline-block
- .box7{
- text-align:center;
- font-size:0;}.box7 span{
- vertical-align:middle;
- display:inline-block;
- font-size:16px;}.box7:after{
- content:'';
- width:0;
- height:100%;
- display:inline-block;
- vertical-align:middle;
- }
这种方法确实巧妙…通过:after来占位。
方法7:display:flex和margin:auto
- .box8{
- display: flex;
- text-align: center;
- }
- .box8 span{
- margin: auto;
- }
方法8:display:-webkit-box
- .box9{
- display: -webkit-box;
- -webkit-box-pack:center;
- -webkit-box-align:center;
- -webkit-box-orient: vertical;
- text-align: center
- }
上面的方法已经很齐全了,大家是可以试下咯,如果有更好的方法,可以留言分享出来哟(^U^)ノ~YO。
网友评论文明上网理性发言 已有0人参与
发表评论: