1. 程式人生 > >CSS 居中【整合】

CSS 居中【整合】


<center>

text-align:center

在父容器裡水平居中 inline 文字,或 inline 元素


vertical-align:middle

垂直居中 inline 文字,inline 元素,配合 display:table ,display:table-cell,有奇效。


line-height

與 height 聯手,垂直居中文字


margin:auto

示例:




<``style``>

#ex2_container { width:200px; background-color:yellow; }

#ex2_content { margin:0px auto; background-color:gray; color:white; display:table; }

</``style``>

<``div id="ex2_container"><``div id="ex2_content">Hello World</``div``></``div``>


hacks, hacks(小技巧)

有許多 hacks,負 margin,影子元素 ::before 等。如果你的內容不是固定大小的話,它們大部分是很脆弱的。


translate(-50%,-50%)

用 position 加 translate translate(-50%,-50%) 比較奇特,百分比計算不是以父元素為基準,而是以自己為基準。

示例:


<``style``>

#ex3_container { width:200px; height:200px; background-color:yellow; position:relative; }

#ex3_content { left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:gray; color:white; position:absolute; }

</``style``>

<``div id="ex3_container"><``div id="ex3_content">Hello World</``div``></``div``>


這個技巧相當囂張,同樣適用於沒固定大小的內容,min-width,max-height,overflow:scroll 等。

絕對定位居中

父容器元素:position: relative


.Absolute-Center {

width``: 50%``;

height``: 50%``;

overflow``: auto``;

margin``: auto``;

position``: absolute``;

top``: 0``; left``: 0``; bottom``: 0``; right``: 0``;

}

注意:高度必須定義,建議加 overflow: auto,防止內容溢位。

視口居中

內容元素:position: fixed,z-index: 999,記住父容器元素 position: relative


.Absolute-Center.is-Fixed {

width``: 50%``;

height``: 50%``;

overflow``: auto``;

margin``: auto``;

position``: fixed``;

top``: 0``; left``: 0``; bottom``: 0``; right``: 0``;

z-index``: 999``;

}

響應式

百分比寬高,最大、最小寬度均可以,加 padding 也可以


.Absolute-Center.is-Responsive {

width``: 60%``;

height``: 60%``;

min-width``: 400px``;

max-width``: 500px``;

padding``: 40px``;

overflow``: auto``;

margin``: auto``;

position``: absolute``;

top``: 0``; left``: 0``; bottom``: 0``; right``: 0``;

}

偏移

只要 margin: auto; 在,內容塊將垂直居中,top, left, bottom, right 可以設定偏移。


.Absolute-Center.is-Right {

width``: 50%``;

height``: 50%``;

margin``: auto``;

overflow``: auto``;

position``: absolute``;

top``: 0``; left``: auto``; bottom``: 0``; right``: 20px``;

text-align``: right``;

}

溢位

居中內容比父容器高時,防止溢位,加 overflow: auto (沒有任何 padding 時,也可以加 max-height: 100%;)。


.Absolute-Center.is-Overflow {

width``: 50%``;

height``: 300px``;

max-height``: 100%``;

margin``: auto``;

overflow``: auto``;

position``: absolute``;

top``: 0``; left``: 0``; bottom``: 0``; right``: 0``;

}

調整尺寸

resize 屬性可以讓尺寸可調。 設定 min- /max- 限制尺寸,確定加了 overflow: auto 。


.Absolute-Center.is-Resizable {

min-width``: 20%``;

max-width``: 80%``;

min-height``: 20%``;

max-height``: 80%``;

resize: both``;

overflow``: auto``;

margin``: auto``;

position``: absolute``;

top``: 0``; left``: 0``; bottom``: 0``; right``: 0``;

}

影象

影象同樣適用,設定 height: auto;


.Absolute-Center.is-Image {

width``: 50%``;

height``: auto``;

margin``: auto``;

position``: absolute``;

top``: 0``; left``: 0``; bottom``: 0``; right``: 0``;

}

可變高度

高度必須定義,但可以是百分比或 max-height。不想定義高度的話,用 display: table (需要考慮 Table-Cell 相容性)。


.Absolute-Center.is-Variable {

display``: table;

width``: 50%``;

overflow``: auto``;

margin``: auto``;

position``: absolute``;

top``: 0``; left``: 0``; bottom``: 0``; right``: 0``;

}

負 margin

確切知道寬高,負 margin 是寬和高的一半。


.is-Negative {

width``: 300px``;

height``: 200px``;

padding``: 20px``;

position``: absolute``;

top``: 50%``; left``: 50%``;

margin-left``: -170px``; /* (width + padding)/2 */

margin-top``: -120px``; /* (height + padding)/2 */

}


Table-Cell

結構:


<``div class="Pos-Container is-Table">

<``div class="Table-Cell">

<``div class="Center-Block">

``

</``div``>

</``div``>

</``div``>

樣式:


.Pos-Container.is-Table { display``: table; }

.is-Table .Table-Cell {

display``: table-cell``;

vertical-align``: middle``;

}

.is-Table .Center-Block {

width``: 50%``;

margin``: 0 auto``;

}


FlexBox


.Pos-Container.is-Flexbox {

display``: -webkit-box;

display``: -moz-box;

display``: -ms-flexbox;

display``: -webkit-flex;

display``: flex;

-webkit-box-align: center``;

-moz-box-align: center``;

-ms-flex-align: center``;

-webkit-align-items: center``;

align-items: center``;

-webkit-box-pack: center``;

-moz-box-pack: center``;

-ms-flex-pack: center``;

-webkit-justify-``content``: center``;

justify-``content``: center``;

}

這裡推薦一下我的前端學習交流群:784783012,裡面都是學習前端的,如果你想製作酷炫的網頁,想學習程式設計。自己整理了一份2018最全面前端學習資料,從最基礎的HTML+CSS+JS【炫酷特效,遊戲,外掛封裝,設計模式】到移動端HTML5的專案實戰的學習資料都有整理,送給每一位前端小夥伴,有想學習web前端的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入學習。

點選:加入

原文地址:https://segmentfault.com/a/1190000016896535