網頁元素CSS居中實現完整攻略

mikasa 發布于2019-08-28 18:19 / 2864人閱讀

摘要：水平居中行內元素解決方案只需要把行內元素包裹在一個屬性為的父層元素中，并且把父層元素添加如下屬性即可水平居中塊狀元素解決方案這里可以設置頂端外邊距水平居中多個塊狀元素解決方案將元素的屬性設置為，并且把父元素的屬性設置為即可水平居中多

水平居中：行內元素解決方案

只需要把行內元素包裹在一個屬性display為block的父層元素中，并且把父層元素添加如下屬性即可：

.parent {
    text-align:center;
}

水平居中：塊狀元素解決方案

.item {
    /* 這里可以設置頂端外邊距 */
    margin: 10px auto;
}

水平居中：多個塊狀元素解決方案
將元素的display屬性設置為inline-block，并且把父元素的text-align屬性設置為center即可:

.parent {
    text-align:center;
}

水平居中：多個塊狀元素解決方案 (使用flexbox布局實現)
使用flexbox布局，只需要把待處理的塊狀元素的父元素添加屬性display:flex及justify-content:center即可:

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

垂直居中：單行的行內元素解決方案

.parent {
    background: #222;
    height: 200px;
}

/* 以下代碼中，將a元素的height和line-height設置的和父元素一樣高度即可實現垂直居中 */
a {
    height: 200px;
    line-height:200px; 
    color: #FFF;
}

垂直居中：多行的行內元素解決方案
組合使用display:table-cell和vertical-align:middle屬性來定義需要居中的元素的父容器元素生成效果，如下：

.parent {
    background: #222;
    width: 300px;
    height: 300px;
    /* 以下屬性垂直居中 */
    display: table-cell;
    vertical-align:middle;
}

垂直居中：已知高度的塊狀元素解決方案

.item{
    top: 50%;
    margin-top: -50px;  /* margin-top值為自身高度的一半 */
    position: absolute;
    padding:0;
}

垂直居中：未知高度的塊狀元素解決方案

.item{
    top: 50%;
    position: absolute;
    transform: translateY(-50%);  /* 使用css3的transform來實現 */
}

水平垂直居中：已知高度和寬度的元素解決方案1
這是一種不常見的居中方法，可自適應，比方案2更智能，如下：

.item{
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

水平垂直居中：已知高度和寬度的元素解決方案2

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;  /* 設置margin-left / margin-top 為自身高度的一半 */
    margin-left: -75px;
}

水平垂直居中：未知高度和寬度元素解決方案

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用css3的transform來實現 */
}

水平垂直居中：使用flex布局實現

.parent{
    display: flex;
    justify-content:center;
    align-items: center;
    /* 注意這里需要設置高度來查看垂直居中效果 */
    background: #AAA;
    height: 300px;
}

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

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

HTML+CSS基礎課程-imooc-【更新完畢】

摘要：包含后代選擇器包含選擇器，即加入空格用于選擇指定標簽元素下的后輩元素。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過進行選擇。 6-1 認識CSS樣式 CSS全稱為層疊樣式表 (Cascading Style Sheets)，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。使用CSS樣式的一個好處是通過定義某個樣式，可...

Heier 2019-08-01 15:04 評論0 收藏0
css - 收藏集 - 掘金

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

phpmatt 2019-08-29 12:41 評論0 收藏0
老生常談之CSS的垂直居中

摘要：在通常情況下，對那些需要居中的元素來說，其尺寸往往是由其內容來決定的。雖然沒有垂直居中效果，但也是完全可以接受的。的另一個好處在于，它還可以將匿名容器即沒有被標簽包裹的文本節點垂直居中。主要摘自：《CSS 揭秘》，強烈推薦的一本書。 44 年前我們就把人類送上月球了，但現在我們仍然無法在 CSS 中實現垂直居中。——James Anderson(https://twitter.co...

CompileYouth 2019-08-30 15:55 評論0 收藏0
前端練級攻略(第二部分)

摘要：是文檔的一種表示結構。這些任務大部分都是基于它。這個實踐的重點是把你在前端練級攻略第部分中學到的一些東西和結合起來。一旦你進入框架部分，你將更好地理解并使用它們。到目前為止，你一直在使用進行操作。它是在前端系統像今天這樣復雜之前編寫的。本文是前端練級攻略第二部分，第一部分請看下面：前端練級攻略(第一部分) 在第二部分，我們將重點學習 JavaScript 作為一種獨立的語言，如...

BWrong 2019-08-23 16:49 評論0 收藏0
[譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

摘要：一般來說，聲明式編程關注于發生了啥，而命令式則同時關注與咋發生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區處理，這樣就能讓開發者專注于發生了啥，這里推薦一波與。本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。繼續譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...

roadtogeek 2019-08-19 18:25 評論0 收藏0