css中怎么讓div居中

這篇文章給大家分享的是有關(guān)css中怎么讓div居中的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、昌江網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場景定制、成都商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為昌江等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

css的基本語法是什么

css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。

css中讓div居中的方法：1、對div使用絕對布局“position:absolute;”；2、對div使用絕對布局并把top和left的值都設(shè)置為50%；3、通過css3的transform屬性實現(xiàn)div居中。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。

XHTML網(wǎng)站設(shè)計標準中，不再使用表格定位技術(shù)，而是采用css+div的方式實現(xiàn)各種定位。下面我們來看幾種css設(shè)置div居中的方法。

方法一：對div使用絕對布局position:absolute;并設(shè)置top，left，right，bottom的值相等，但不一定都等于0；并且設(shè)置margin:auto。

方法二：這個方法要知道div的寬度和高度。對div使用絕對布局position:absolute;并把top和left的值都設(shè)置為50%；50%就是指頁面窗口的寬度和高度的50%；最后將div左移和上移，左移和上移的大小為div寬度和高度的一半。

其中 margin-left：-100px 和 margin-top：-100px 可以寫成 margin：-100px 0px 0px -100px

方法三：div使用絕對定位position：absolute，并且設(shè)置left和top的值都為50%。使用css3的transform屬性。transform：translate（-50%，-50%）。

以上3種方法的效果如下顯示

若有兩個div，里面小的div相對于外面大的div水平垂直居中對齊，有以下幾種方法。

• 利用position和margin：auto實現(xiàn)。父元素設(shè)置position：relative；子元素設(shè)置position：absolute，并設(shè)置top，left，right，bottom值相等。

• 使用position。父元素設(shè)置position：relative；子元素設(shè)置position：absolute。并設(shè)置top和left為50%，并設(shè)置左移和上移為子元素的大小的一半。

• 使用display：flex。這種方法需要設(shè)置瀏覽器的兼容性。

• 使用transform：translate（）。父元素設(shè)置position：relative；子元素設(shè)置position：absolute。并設(shè)置top和left為50%。最后設(shè)置transform：translate（-50%，-50%）。

以上四種方法的效果圖如下顯示

感謝各位的閱讀！關(guān)于“css中怎么讓div居中”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享標題：css中怎么讓div居中
文章位置：http://m.jiaotiyi.com/article/igsipe.html