資訊專欄INFORMATION COLUMN
摘要：我們在實際工作中常會遇到需要設置居中的場景，居中分為水平居中和垂直居中。針對不同的情況又有不同的實現(xiàn)方式，例如行內元素和塊狀元素。例子對于圖片垂直居中可以利用的實現(xiàn)例子整個居中讓為的居中實現(xiàn)代碼以下不支持。
我們在實際工作中常會遇到需要設置居中的場景，居中分為水平居中和垂直居中。針對不同的情況又有不同的實現(xiàn)方式，例如行內元素和塊狀元素。
水平居中：
行內元素：text-align:center；//這個比較簡單
塊狀元素：定寬的塊狀元素通過設置左右margin為auto實現(xiàn)，例如margin：10px auto；不定寬的塊狀元素：加入 table 標簽后按照定寬元素進行設置；設置 display: inline 后按照行內元素設置；設置position:relative left:50% 通過給父元素設置 float，然后給父元素設置position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現(xiàn)水平居中。
垂直居中：
例子1.
對于單行文本最簡單的垂直居中就是利用line-height，首先，定義整個div的高度，然后再設置line height 的值等于div高度，這樣就實現(xiàn)了單行文本的居中效果。
例子2.
對于圖片垂直居中可以利用css的vertical-align:middle實現(xiàn):
#parent {
line-height :200px;
}
#parent img{
vertical-align:middle;
}
例子3.
整個div 居中
Content here
讓id為child的div 居中實現(xiàn)代碼：
#parent{display:table;}
#child {
display:table-cell;
vertical-align:middle;
}
//display:table-cell;IE8以下不支持。
IE8以下的瀏覽器可以使用
#child{
display:inline-block;
}
例子4.針對div塊級元素，可以使用下面的方法實現(xiàn)垂直居中
HTML:css： #parent{ position:relative;} #child { positon:absolute; top:50%; left:50%; height:30%; width:50%; margin:-15% 0 0 -25%; }Content here
設置父級position為relative；子元素postion為absolute；同時設置子元素的top為50%，水平也想居中的話，就設置left為50%
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/111605.html
摘要：我們在實際工作中常會遇到需要設置居中的場景，居中分為水平居中和垂直居中。針對不同的情況又有不同的實現(xiàn)方式，例如行內元素和塊狀元素。例子對于圖片垂直居中可以利用的實現(xiàn)例子整個居中讓為的居中實現(xiàn)代碼以下不支持。 我們在實際工作中常會遇到需要設置居中的場景，居中分為水平居中和垂直居中。針對不同的情況又有不同的實現(xiàn)方式，例如行內元素和塊狀元素。 水平居中： 行內元素：text-align:...
摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...
摘要：居中分為水平居中和垂直居中，水平居中方式也較為常見和統(tǒng)一，垂直居中的方法就千奇百怪了。若把最后一行加上，即可同時實現(xiàn)水平和垂直居中。 博客原文地址：Claiyre的個人博客 https://claiyre.github.io/如需轉載，請在文章開頭注明原文地址不為繁華易匠心 從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。css居中分為水平居中和垂直居中，水平居中方式也較為...
閱讀 635·2023-04-25 18:37
閱讀 2796·2021-10-12 10:12
閱讀 8376·2021-09-22 15:07
閱讀 577·2019-08-30 15:55
閱讀 3183·2019-08-30 15:44
閱讀 2204·2019-08-30 15:44
閱讀 1635·2019-08-30 13:03
閱讀 1570·2019-08-30 12:55
