div自適應水平垂直居中的方法

MonoLog 發布于2019-04-23 13:39 / 994人閱讀

摘要：圣杯雙飛翼水平自適應居中的基礎上圣杯雙飛翼水平自適應居中的基礎上第一步居中的寫在最前面撐滿一整行三個都向左浮動第一步居中的寫在最前面，撐滿一整行。

1.Flexbox布局：

display:flex;
justify-content:center;
align-items:center;
width:100%;

2.Bootstrap柵格布局

一共12格，分成3塊，每塊占4列。居中的內容寫在中間的那一塊。

3.圣杯/雙飛翼（水平自適應居中的基礎上）

第一步：居中的div寫在最前面，`width:100%`撐滿一整行。三個div都向左浮動`float:left;`

Main
Left
Right

第二步：讓三個div顯示在同一行

div.left { marin-left:100%}
div.right{ marin-left:自身的寬度}

第三步：讓中間的div能夠自適應

圣杯布局的做法：

div.main{
    padding-left:左div的寬度；
    padding-right:右div的寬度；
}

雙飛翼布局的做法：

在div.main內部再添加一個div.mc：
然后設置div.mc的margin值

margin-left:左div的寬度；
margin-right:右div的寬度；

現在，水平居中已經實現了；

第四步：垂直居中

在div.left,div.right,div.main外面再加一個div.wrap,
然后對div.con設置 display:table,對div.wrap設置

display:table-cell;
vertical-align:middle;

4.relative/positive + top/left+tarnsform

父元素：

position:relative

子元素：

position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);

transform: translate(-50%, -50%);意思是向右移動自身50%的寬度，向下移動自身50%的高度。

為什么有了`top:50%;left:50%`還要 `transform: translate(-50%, -50%);`

最初：

加了top:50%;left:50%后：

還需要再往左、往上挪一挪：

5.relative/positive + top/left+left + margin

和方法4一樣，用top和left挪到中間：

這之后用margin-left和margin-right進行處理：

先給`div.child`設置寬度，然后設置`margin`：

6.用`top,left,bottom,right`

計算公式：

top + div.child 的 height +bottom = div.parent 的 height

left + div.child 的 width +right = div.parent 的 width

如果子元素是行內元素，如

,要注意一開始就要去掉margin和padding

方法4、5、6有的demo，詳見 github

云服務器 GPU云服務器水平垂直居中 div自適應 html的水平居中垂直居中

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

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

構建靜態頁面之 [ 布局 ]

摘要：布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內塊級元素水平居中的第一種方法該方法需作用在父子結構中為父級設置屬性為子級設置屬性注意的問題屬性是設置文本內容對齊方式的布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中 + 行內塊級元素（text-a...

andot 2019-08-29 16:31 評論0 收藏0
構建靜態頁面之 [ 布局 ]

摘要：布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內塊級元素水平居中的第一種方法該方法需作用在父子結構中為父級設置屬性為子級設置屬性注意的問題屬性是設置文本內容對齊方式的布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中 + 行內塊級元素（text-a...

JessYanCoding 2019-08-02 16:31 評論0 收藏0
使一個div垂直+水平居中的幾種方法

摘要：前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個問題思路絕對定位居中原始版這個是我回答出來的，也是被各位所熟知的一種方法，設外層相對定位，內前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...

joyqi 2019-08-29 11:04 評論0 收藏0
CSS 常用的定位和布局方法匯總(已添加源碼地址)

CSS-Layout 旨在打造詳盡的前端布局代碼學習庫（自從用了框架開發，CSS生疏了不少，所以開這個庫練練手）SF不能正確解析含有中文的網址，所以某些預覽鏈接無法跳轉，請訪問我的博客閱讀此文常見定位方法水平居中子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。方案選擇基本思路：子元素為行內元素：對父元素設置text-align:center; 定寬塊狀元素: 設...

loonggg 2019-08-29 12:15 評論0 收藏0