div居中 div水平居中代碼

作者：dthost |

時間：2018-08-11 |

分類：未分類 |

7,918 次閱讀

在設計網頁的時候，經常需要居中，比如我設計了一張圖片，我需要放圖片中間，如果單純用代碼調用，這個圖片肯定是接著圖片的，那么如何居中呢？下面我們演示代碼。

有很多種辦法，我們一種一種談。

第一種使用DIV布局，也就是用CSS代碼來居中，我們可以看下面代碼。

.main{ text-align:center; /*這里設置居中文字或者更換為圖片代碼*/ background-color:#fff; border-radius:20px; width:300px; height:350px; margin:auto; position:absolute; top:0; left:0; right:0; bottom:0; }

這段代碼，是讓里面的文字居中或者圖片居中，我們需要設置CSS也就是這段文字居中的具體數值，通過TOP LEFE等來設置，目前來看設置的是border-radius:20px; width:300px; height:350px;

第二種辦法：設置圖片居中。

Img是內聯元素，要設置其margin屬性使其居中，就要將其轉換為塊元素display:block;然后利用margin:0 auto;實現圖片的水平居中；(有的設計師為圖片再加個div標簽，然后通過div標簽的margin實現居中)。

如果圖片在div中下的span屬性中，必須轉換成display：block；然后padding-top:10px。

第三者直接把代碼加入到你的代碼里。

上面這段代碼來看，是調用了一張圖片。，默認已經設置好了居中代碼，咱們只需要在你的需要居中的文檔前加入

然后在到你需要居中的文字或者圖片后加入

即可，這種方式比較簡單適合所有人。

其實不管任何方式的居中，你都需要在代碼里直接用代碼實現，或者調用CSS實現，所以，你可以在網上尋找居中代碼，在你代碼2頭加入你需要居中的代碼即可，這個不行換一個，一般都可以實現。

總結

以上是生活随笔為你收集整理的dev 居中_div居中 div水平居中代码 | 帮助信息-动天数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。