玩轉 css 居中

snowell 發布于2019-08-29 10:55 / 3420人閱讀

摘要：文字居中文字的水平居中對于非元素內的文字水平居中都可以通過完成。也可以設置文字單行的垂直居中這種場景通常在修正框光標和文字的位置。文字單行的相對居中例如圖中的狀況，需要文字相對于圖片的垂直居中，通過對圖片設置即可。

文字居中 文字的水平居中

對于非 inline 元素內的文字水平居中都可以通過 text-align: center; 完成。

也可以設置 margin: 0 auto;

文字（單行）的垂直居中

這種場景通常在修正 input 框光標和文字的位置。設置 line-height 的值等于 height 即可。

文字（單行）的相對居中

/Users/alex/Desktop/24319F76-DE76-4A5A-840D-8EC7C0C43882.png
例如圖中的狀況，需要文字相對于圖片的垂直居中，通過對圖片設置vertical-align: middle;即可。vertical-align 其實可以完成多種相對對其，例如 top,baseline 等等。

元素居中 內部元素的寬高已知

本方法應該是用的非常多的了，直接看代碼吧

.outer {
    width: 100%;
      height: 500px;
    position: relative;
}
.inner {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  background-color: blue;
}

上面方法在 css 中加入 calc 之后可以做如下優化（安卓 4.3 以上，IE9＋）

.outer {
  width: 100%;
  height: 500px;
  position: relative;
}
.inner {
  position: absolute;
  width: 200px;
  height: 200px;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  background-color: blue;
}

外部元素的高度已知

html:


  
    asjdhajshdkjhakjdshk
    sdalskjdkajls

table 搭配 table-cell 的方法

.outer {
  width: 100%;
  height: 300px;
  display: table;
  text-align: center;
}
.inner {
  display: table-cell;
  vertical-align: middle;
}

translate 方法（IE9 以上）

.outer {
  width: 100%;
  height: 500px;
  position: relative;
}
.inner {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}

flex 方法
該方法就非常簡單了，只需要設置 outer

.outer {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

內外元素高度均已知

html 模版沿用上面

.outer {
  width: 100%;
  height: 500px;
  position: relative;
  text-align: center;
}
.inner {
  height: 100px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

我相信本文絕對不是最全的 css 居中方式，希望各位大神們補充起來。

云服務器 GPU云服務器 html居中css 玩轉linux 玩轉vps 玩轉ubuntu

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

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

查漏補缺 - 收藏集 - 掘金

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

YuboonaZhang 2019-08-29 12:56 評論0 收藏0
css - 收藏集 - 掘金

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

phpmatt 2019-08-29 12:41 評論0 收藏0
帶你玩轉css3的3D！

摘要：透視即是以現實的視角來看屏幕上的事物，從而展現的效果。旋轉則不再是平面上的旋轉，而是三維坐標系的旋轉，就包括軸，軸，軸旋轉。必須與屬性一同使用，而且只影響轉換元素。可自由轉載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說，先上demo 酷炫css3走馬燈/正方體動畫： https://bupt-...

Panda 2019-08-29 11:03 評論0 收藏0
帶你玩轉css3的3D！

摘要：透視即是以現實的視角來看屏幕上的事物，從而展現的效果。旋轉則不再是平面上的旋轉，而是三維坐標系的旋轉，就包括軸，軸，軸旋轉。必須與屬性一同使用，而且只影響轉換元素。可自由轉載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說，先上demo 酷炫css3走馬燈/正方體動畫： https://bupt-...

archieyang 2019-08-01 15:32 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0