css居中的幾種方式

css居中的幾種方式

1.?

CSS div居中的幾種方法

CSS實(shí)現(xiàn)div垂直居中的方法有很多，下面div居中的幾種方法是自己平時(shí)寫網(wǎng)頁中經(jīng)常用到的，最常見的例子就是登錄注冊(cè)彈出框。 方法一：對(duì)div使用**布局position:absolute;并設(shè)置top，left，right，bottom的值相等，但不一定都等于0;并且設(shè)置margin:auto。

方法二：這個(gè)方法要知道div的寬度和高度。

對(duì)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種方法的效果如下顯示若有兩個(gè)div，里面小的div相對(duì)于外面大的div水平垂直居中對(duì)齊，有以下幾種方法。 方法一：利用position和margin：auto實(shí)現(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%）。

css怎么設(shè)置居中

水平居中

若是行內(nèi)元素, 給其父元素設(shè)置 text-align:center,即可實(shí)現(xiàn)行內(nèi)元素水平居中.
若是塊級(jí)元素, 該元素設(shè)置 margin:0 auto即可.

若子元素包含 float:left 屬性, 為了讓子元素水平居中, 則可讓父元素寬度設(shè)置為fit-content,并且配合margin百科, 作如下設(shè)置:.parent{width: -moz-fit-content;width: -webkit-fit-content;width:fit-content;margin:0 auto;}

使用flex 布局, 可以輕松的實(shí)現(xiàn)水平居中, 子元素設(shè)置如下:.son{display: flex;justify-content: center;}

使用CSS3中新增的transform屬性, 子元素設(shè)置如下:.son{position:absolute;left:50%;transform:translate(-50%,0);}

使用**定位方式, 以及負(fù)值的margin-left, 子元素設(shè)置如下:.son{position:absolute;width:固定;left:50%;margin-left:-0.5寬度;}

使用**定位方式, 以及l(fā)eft:0;right:0;margin:0 auto; 子元素設(shè)置如下:.son{position:absolute;width:固定;left:0;right:0;margin:0 auto;}

垂直居中
若元素是單行文本, 則可設(shè)置 line-height 等于父元素高度

若元素是行內(nèi)塊級(jí)元素, 基本思想是使用display: inline-block, vertical-align: middle和一個(gè)偽元素讓內(nèi)容塊處于容器**..parent::after, .son{display:inline-block;vertical-align:middle;}.parent::after{content:\’\’;height:****;}元素高度不定

可用 vertical-align 屬性, 而vertical-align只有在父層為 td 或者 th 時(shí), 才會(huì)生效, 對(duì)于其他塊級(jí)元素, 例如 div、p 等, 默認(rèn)情況是不支持的. 為了使用vertical-align, 我們需要設(shè)置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

用 Flex 布局.parent {display: flex;align-items: center;}

可用 transform , 設(shè)置父元素相對(duì)定位(position:relative), 子元素如下css樣式: .son{position:absolute;top:50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}

元素高度固定

設(shè)置父元素相對(duì)定位(position:relative), 子元素如下css樣式: .son{position:absolute;top:50%;height:固定;margin-top:-0.5高度;}

設(shè)置父元素相對(duì)定位(position:relative), 子元素如下css樣式:.son{position:absolute;height:固定;top:0;bottom:0;margin:auto 0;}

CSS之元素水平居中

我們以一個(gè)面試題開始吧 這道題看似貌似很簡(jiǎn)單，但是我們需要分析具體的場(chǎng)景，因?yàn)椴煌娘@示方式的使用利弊是不一樣的。 以下的討論都是子元素相對(duì)于其父元素的水平居中。

垂直居中，以后會(huì)說到。

常見的行內(nèi)元素有 span img 等，對(duì)這些元素居中設(shè)置，只需要在父元素的css中添加 text-align:center 即可。同樣它也對(duì)行內(nèi)塊元素也是有效的。 但是，有個(gè)缺點(diǎn)，由于 text-align 是可繼承屬性，即父元素內(nèi)部的所有元素都會(huì)繼承這個(gè)屬性，從而它的子元素內(nèi)部的文本都會(huì)居中顯示了。因此需要對(duì)子元素的文本居中方式單獨(dú)設(shè)定。

針對(duì)塊級(jí)元素的居中，我們將分為定寬和不定寬兩種情況來討論。 1.定寬 （1）子元素是正常流布局 若子元素的寬度是已知的，那么我們可以設(shè)置子元素的左右 margin 為 auto 即可 行內(nèi)塊元素也算塊級(jí)元素，同樣適用 目前所有瀏覽器都是支持的 （2）子元素**定位布局(absolute) 如果子元素是**定位的，由于子元素此時(shí)是脫離文檔流，上面的方法就失效了。這時(shí)需要明確指出子元素的定位，四個(gè)方位均要指定。

如下： 這樣也可以實(shí)現(xiàn)**定位元素的居中。原因可點(diǎn)擊 這里 。如果**定位子元素的margin為auto，你會(huì)發(fā)現(xiàn)它水平垂直居中了！此方法僅適用于IE8+瀏覽器中，IE7就掛了，不過你可以下面這個(gè)方法： 2.不定寬 不定寬元素如果要居中需要額外的輔助手段 （1）css3新特性 transform 如果你對(duì)瀏覽器并沒有什么特別要求，那么可以使用css3提出的新屬性 transform 完成居中需求 這里需要子元素是**定位 （2）借助table元素 上面定寬元素設(shè)定左右margin為auto之所以可以居中，原因是左右margin會(huì)平分父元素剩下的空間。

有個(gè)元素除外，那就是tabel元素。table有趣的地方在于它本身并不是塊級(jí)元素，如果不給它設(shè)定寬度的話，它的寬度由內(nèi)部元素的寬度“撐起”，但即使不設(shè)定它的寬度，僅設(shè)置margin-left:auto和margin-right:auto就可以實(shí)現(xiàn)水平居中。 **的缺點(diǎn)想必你也是知道，就是無關(guān)標(biāo)簽太多，加深了嵌套的層級(jí)，維護(hù)性很差。

（3）父元素使用float布局 這里需要多添加一層父元素，父子元素均float布局，之后設(shè)置position為relative，left為50% 缺點(diǎn)是你需要額外處理浮動(dòng)所帶來的一些問題。并且如果你設(shè)置了背景色，布局會(huì)有些混亂 以上是我對(duì)元素實(shí)現(xiàn)居中的一些方法，歡迎大家補(bǔ)充。