使用CSS實現垂直居中的7種方法分享
- 高洛峰原創
- 2017-03-21 17:10:541572瀏覽
今天申請部落格通過了，跟大家講講我所看到的純css實現垂直居中的各種方法。為什麼要把它當作第一篇文章呢？因為這是我剛開始接觸前端學到的對我最有用的知識，希望大家也能從中獲益！
在CSS中實作水平居中是非常簡單的，行內元素設定其父元素的text-align:center，塊級元素就對其自身應用magrin:auto。然而，實現垂直居中就有點麻煩了，首先它是極其常見的需求，看似簡單，在實踐中，往往難如登天，當設計尺寸不固定時尤其如此。以下是我找到的一些方法：
方法一：行高line-height
（1）單行文字居中
HTML程式碼
<p class="box1"> <p class="box2">垂直居中</p> </p>
CSS程式碼
.box1{
height: 200px;
}
.box2{
line-height: 200px;
}
（2）圖片垂直置中
##HTML程式碼<p class="box1"> <img src="images/bg-sun.png" alt=""> </p>CSS程式碼
.box1{
line-height:200px;
}
.box1 img{
vertical-align: middle;
}
方法二：table-cell
CSS程式碼 .box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法三：display:flex
#（1）CSS程式碼 .box1{
display: flex;
}
.box2{
margin:auto;
}（2）CSS程式碼
.box1{
display: flex;
justify-content:center;
align-items:center;
}
方法四：絕對定位和負邊距
（1）CSS程式碼 .box1{
position: relative;
}
.box2{
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;/*减去子元素高度一半*/
margin-left:-32px;/*减去子元素宽度一半*/
}（2）CSS程式碼
.box2{
position: absolute;
top:calc(50% - 10px);/*减去子元素高度一半*/
left:calc(50% - 32px);/*减去子元素宽度一半*/
}
方法五： 絕對定位和0
CSS程式碼 .box2{
width: 50%;
height: 50%;
background: #555;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
方法六：translate
（1）CSS程式碼 .box2{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}（2）HTML程式碼
<body> <p class="box1"> </p> </body>CSS程式碼
.box1{
width: 200px;
height: 200px;
background: #666;
margin: 50vh auto 0;
transform: translateY(-50%);
}
方法七：display:-webkit-box
CSS程式碼 .box2{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center7 }以上是使用CSS實現垂直居中的7種方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn