實作元素垂直居中的方法很多,相信大家都能說出幾種。相對于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
- }
上面的方法已經很齊全了,大家是可以試下咯,如果有更好的方法,可以留言分享出來!