CSS水平垂直居中總結

mist14 發布于2019-08-30 13:13 / 1259人閱讀

摘要：垂直居中表格布局法為什么就能垂直居中拜讀了張鑫旭大神的文章行高指的是什么行高指的是文本行的基線間的距離。行內框具有垂直居中性。

CSS水平居中、垂直居中、水平垂直居中方法總結

文字的水平居中:

text-align:center;

單行文字的垂直居中：

line-height:30px;
height:30px;

讓有寬度的div水平居中：

margin: 0 auto;
width:300px;//必須要有寬度，margin:0 auto才能讓它居中

讓絕對定位的div垂直居中：

position:absolute;
top:0;
bottom:0;
margin:auto 0;  //垂直方向的auto 發揮的作用
width:300px;
height:300px;

同理，讓絕對定位的div水平和垂直方向都居中：

position:absolute;
top:0;
left: 0;
right:0;
bottom:0;
margin:auto; 
width:300px;
height:300px;

已知寬高的容器的水平垂直方向居中：

width: 300px;
height:300px;
position: absolute;
top:50%;
left:50%;
margin-top: -150px; //自身高度的一半
margin-left:-150px;

未知寬高的容器的水平垂直方向居中：

width:300px;
height:300px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

*注：transform屬性，低版本瀏覽器不兼容，例如IE8

水平垂直居中記得要想到flexbox:

.container{
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .div{
//whatever
}

此時.div無論是否已知寬高，都能兩個方向居中。

垂直居中（表格布局法）

.container{
  display: table;
}
.container .div{
  display: table-cell;
  vertical-align:middle;
}

為什么height=line-height就能垂直居中？

拜讀了張鑫旭大神的文章：

行高指的是什么？
行高指的是文本行的基線間的距離。

什么是基線？
基線不是文字的下端沿。是英文字母X的下端沿。

文字有頂線，底線，基線和中線，用以確定文字行的位置。

什么是行距？
行高與字體尺寸之間的差。

還要理解一個概念 -- 行內框
? ? ?行內元素會生成一個行內框。它無法顯示出來，但是又確實存在。

? ? ?在沒有其他因素影響的時候，行內框等于內容區域。
? ? >?設定行高可以增加或者減少行內框的高度，即：將行距的值（行高-字體尺寸）除以2，分別加到內容區域的上下兩邊。這是理解的關鍵，也就是內容區域的上面和下面均等增加一個距離?？梢栽谝欢挝淖稚线M行調試看看，發現增加減小line-height時，文字是整體上下縮進的，而非第一行不動，后面的向上靠攏。

行內框具有垂直居中性。即行內框占據的空間按與文字內容公用水平中垂線。（張鑫旭）

關于vertical-align:middle屬性，也很神奇，可以好好再拜讀下大神的文章。

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

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

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

對css居中的一點總結

摘要：為了更好的加深對居中的理解，搜集和閱讀相關資料，發現不錯的文章將其整理出來。在學習前端的過程中，發現元素和文本的水平居中和垂直居中，是經常會出現的問題，在實際工作中也會經常碰到。居中的技巧有很多，但在編寫代碼的過程中，發現有時候技巧管用，有時候不管用，于是就將每個知道的方案都試一遍，找到合適的。這種情況究其原因是對居中的認識不夠深入，只是停留在實現需求的水平上。為了更好的加深對居中的...

BenCHou 2019-08-29 11:17 評論0 收藏0
css居中總結

摘要：前言一直有個想法要把各種居中的方法總結一下，但還是一直沒有時間去整理。最近剛好在做樣式重構的項目，順便把一下自己有用過的或積累的居中方法給總結一下。又必須有個父級對其進行設置居中。前言一直有個想法要把各種居中的方法總結一下，但還是一直沒有時間去整理。最近剛好在做樣式重構的項目，順便把一下自己有用過的或積累的居中方法給總結一下。水平居中行內元素水平居中行內元素的居中比較簡單，直...

gxyz 2019-08-30 15:55 評論0 收藏0
總結：前端開發中讓元素水平垂直居中的方法

摘要：如果要居中的塊級元素直接是內聯元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產生默認的間距，父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內聯元素，需要添加屬性而且元素不浮動。前端開發中，我們經常需要對元素進行水平垂直居中。為此，小編特地總結了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...

fnngj 2019-08-02 12:02 評論0 收藏0
總結：前端開發中讓元素水平垂直居中的方法

摘要：如果要居中的塊級元素直接是內聯元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產生默認的間距，父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內聯元素，需要添加屬性而且元素不浮動。前端開發中，我們經常需要對元素進行水平垂直居中。為此，小編特地總結了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...

douzifly 2019-08-29 17:17 評論0 收藏0
css對齊方案總結

摘要：核心代碼利用布局利用布局，其中用于設置或檢索彈性盒子元素在主軸橫軸方向上的對齊方式而屬性定義子項在容器的當前行的側軸縱軸方向上的對齊方式。核心代碼相對于的水平垂直居中列表布局兼容性好核心代碼布局核心代碼css對齊方案總結垂直居中通用布局方式(內斂元素和塊狀元素都適用) 利用flex:核心代碼: 12345 .container{ display:flex; ...

marek 2019-04-23 11:45 評論0 收藏0