Web前端 css實現元素垂直居中的常用方法

MonoLog 發布于2019-04-23 11:42 / 1299人閱讀

摘要：不過這里得確定內部元素的高度，可以用百分比，比較適合移動端。方法這實際上是方法的變形，移位是通過來實現的。清除浮動，并顯示在中間。

方法1：table-cell

html結構：

1 2 3 class="box box1"> ????????垂直居中

css：

1 2 3 4 5 .box1{ ????display: table-cell; ????vertical-align: middle; ????text-align: center;???????? }

方法2：display:flex

1 2 3 4 5 .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

1 2 3 4 5 6 7 8 9 .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

1 2 3 4 5 6 7 8 .box6 span{ ????????????position: absolute; ????????????top:50%; ????????????left:50%; ????????????width:100%; ????????????transform:translate(-50%,-50%); ????????????text-align: center; ????????}

這實際上是方法3的變形，移位是通過translate來實現的。

方法6：display:inline-block

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .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

1 2 3 4 5 .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
}

css3博大精深，可以實現很多創造性的效果，需要好好研究下。

今天又發現一種方法，現在補上：

方法9：display:-webkit-box

這種方法，在 content 元素外插入一個 div。設置此 div?height:50%; margin-bottom:-contentheight;。

content 清除浮動，并顯示在中間。

  
 Content here

.floater {
    float:left; 
    height:50%; 
    margin-bottom:-120px;
}
.content {
    clear:both; 
    height:240px; 
    position:relative;
}

優點：?
適用于所有瀏覽器?
沒有足夠空間時(例如：窗口縮小) content 不會被截斷，滾動條出現

云服務器 GPU云服務器實現垂直居中垂直居中水平垂直居中文字垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1030.html

css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0
前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
查漏補缺 - 收藏集 - 掘金

摘要：醞釀許久之后，筆者準備接下來撰寫前端面試題系列文章，內容涵蓋瀏覽器框架分鐘搞定常用基礎知識前端掘金基礎智商劃重點在實際開發中，已經非常普及了。這道題--致敬各位10年阿里的前端開發 - 掘金很巧合，我在認識了兩位同是10年工作經驗的阿里前端開發小伙伴，不但要向前輩學習，我有時候還會選擇另一種方法逗逗他們，拿了網上一道經典面試題，可能我連去阿里面試的機會都沒有，但是我感受到了一次面試1...

YuboonaZhang 2019-08-29 12:56 評論0 收藏0
常用前端知識積累

摘要：閉包的理解使用閉包主要是為了設計私有的方法和變量。只在中存放不敏感數據，即使被盜也不會有重大損失。每個最多只能有條，每個長度不能超過，否則會被截掉。有些狀態不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。閉包的理解使用閉包主要是為了設計私有的方法和變量。優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存...

B0B0 2019-08-30 13:55 評論0 收藏0