css系列之水平垂直居中

MiracleWong 發布于2019-08-29 13:44 / 3431人閱讀

摘要：水平居中水平居中沒有什么好說的啦，對于行內元素使用對于塊級元素使用前提是已經為元素設置了適當的寬度垂直居中單行文本多行文本偽元素行內元素偽元素未知寬高絕對居中絕對定位已知寬高負要考慮兼容性浮動元素垂直居中父元素

水平居中

水平居中沒有什么好說的啦，對于行內元素使用text-align;對于塊級元素使用margin: auto（前提是已經為元素設置了適當的 width 寬度）;

垂直居中 單行文本

line-height == height

多行文本 偽元素before/after


    etttttttttttttttttttttttttttttttttttttttttttttgdfsffffffffffffffffffffffffffffffffffffffffffffffffff

.parent {
  height: 250px;
  text-align: center;
  border: 1px solid;
}
.parent:before {
  content: " ";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.child {
   width: 200px;
   display: inline-block;
   word-wrap: break-word;
   border: 1px solid;
   vertical-align: middle;
}

行內元素 line-height


　

.parent {
  line-height: 200px; 
}
.child {
    vertical-align: middle;
}

偽元素before/after


　

.parent {
  height: 200px;
  border: 1px solid;
}
.parent:before {
  content: " ";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.child {
    vertical-align: middle;
}

table-cell ie8+


　

.parent {
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;
}
.child {
  vertical-align: middle;
}

未知寬高 絕對居中+margin:auto

.parent {
   position: relative;
}
.child {
   position: absolute; 
   left: 0; 
   top: 0; 
   right: 0; 
   bottom: 0;
　 margin: auto;
}

絕對定位+transform ie9+

.parent {
   position: relative;
}
.child {
   position: absolute;
　 top: 50%;
　 left: 50%;
　 transform: translate(-50%,-50%);
}

flex ie10+

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
}

grid ie10+

.parent {
   display: grid;
   justify-content: center;
   align-items: center;
}

已知寬高 負margin

要考慮兼容性

.parent {
   position: relative;
}
.child {
   position: absolute;
　 top: 50%;
　 left: 50%;
　 margin: -height/2 -width/2;
}

padding

.parent {
   padding: (parent.height-child.height)/2  (parent.width-child.width)/2;
}

absolute + calc ie9+

.parent {
   position: relative;
}
.child {
   position: absolute;
　 top: calc(50% - height/2 );
　 left: calc(50% - height/2 );
}

浮動元素垂直居中 父元素table-cell

#demo {
    width: 300px;
    height: 200px;
    background-color: grey;
    
    display: table-cell;
    vertical-align: middle;
}
.fl {
    float: left;
    width: 50px;
    height: 50px;
    background-color: black;

}

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

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

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

CSS之各種居中

摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學過程中，居中這個問題經常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內元素才能進行居中。結語以上的方法基本上可以用完成各種情況的居中。前言在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學CSS過程中，居中這個問題經常困擾到我。那為什么CSS的居中這么煩人呢？我認為，這是因為CSS的居中方法以及它的適...

Labradors 2019-08-02 16:01 評論0 收藏0
CSS之各種居中

摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學過程中，居中這個問題經常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內元素才能進行居中。結語以上的方法基本上可以用完成各種情況的居中。前言在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學CSS過程中，居中這個問題經常困擾到我。那為什么CSS的居中這么煩人呢？我認為，這是因為CSS的居中方法以及它的適...

Taste 2019-08-30 14:13 評論0 收藏0
css - 收藏集 - 掘金

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

phpmatt 2019-08-29 12:41 評論0 收藏0
CSS實現水平|垂直居中漫談

摘要：原文首鏈實現水平垂直居中漫談利用進行元素的水平居中，比較簡單，手到擒來行級元素設置其父元素的，塊級元素設置其本身的和為即可。原文首鏈：CSS實現水平|垂直居中漫談利用CSS進行元素的水平居中，比較簡單，手到擒來：行級元素設置其父元素的text-align center，塊級元素設置其本身的left 和 right margins為auto即可。而擼起垂直居中，相信于大多初擼者來說，...

孫吉亮 2019-08-28 18:29 評論0 收藏0
查漏補缺 - 收藏集 - 掘金

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

YuboonaZhang 2019-08-29 12:56 評論0 收藏0