色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

學會這幾種方法css居中很簡單

我們在使用 CSS 來布局時經常需要進行居中，有時一個屬性就能搞定，有時則需要一定的技巧才能兼容到所有瀏覽器，利用 CSS 來實現對象的垂直居中有許多不同的方法，比較難的是應該選擇哪種正確的方法。比如我們都知道 margin:0 auto;的樣式能讓元素水平居中，而margin: auto;卻不能做到垂直居中……下面就 CSS 居中的一些常用方法做個集中的介紹。


首先是水平居中，最簡單的辦法當然就是：

margin:0 auto;

也就是將margin-left和margin-right屬性設置為auto，從而達到水平居中的效果。

文字的水平居中方法：

利用line-height設為height的一樣即可：

實例

.wrap{

line-height: 200px;/*垂直居中關鍵*/

text-align:center;

height: 200px;

font-size: 36px;

background-color: #ccc;

}


效果如下所示：
文字居中

padding填充

利用padding和background-clip配合實現div的水平垂直居中： 
通過background-clip設置為content-box, 將背景裁剪到內容區外沿，再利用padding設為外 div 減去內 div 的差的一半，來實現：

實例

.children {

 width: 100px;

 height: 100px;

 padding: 50px;

 background-color: black;

 background-clip:content-box;/*居中的關鍵*/


效果如下所示：

微信截圖_20201112101718

提示：關于padding的使用，你可以參考 CSS padding 屬性部分。

hacks, hacks（小技巧）

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

translate(-50%,-50%)

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

示例：

實例

#ex3_content{

left:50%; top:50%; 

transform:translate(-50%,-50%);

-webkit-transform:translate(-50%,-50%);

background-color:gray; color:white; position:absolute; }


這個技巧相當囂張，同樣適用于沒固定大小的內容，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;

}



margin填充

首先我們還是定義父子div：

這里我們利用將子 div 的margin-top設置為父 div 高度減去子 div 高度的一半，然后再通過overflow設置為hidden來觸發父 div 的 BFC，CSS代碼如下：

實例

.parent {

 margin:0 auto;

 height:@parentWidth;

 width:@parentWidth;

 background: red;

 overflow:hidden;/*觸發BFC*/

}


效果如下所示：
微信截圖_20201112105305

absolute定位

利用position:absolute搭配top，left 50%，再將margin設為負值也可以對 div 進行水平垂直居中，首先還是需要定義父子 div：

實例

.children {

 position:absolute; 

 left:50%; 

 top:50%; 

 margin:-25px 0 0 -25px ;

 height:50px;

 width:50px;

 background-color: black;

}


其中的margin中的值為該 div 寬度的一半，最后效果圖：

微信截圖_20201112105956

圖片居中

一般的圖片居中都是和text-align一樣，將圖片包裝在一個 div 中，將該 div 的text-align設為center即可。  

有一種特殊的方式，利用了一個圖片進行占位，以讓父容器獲得高寬，從而讓進行 -50% 偏移的圖片能有一個參照容器作百分比計算。優點是可以不知道圖片的大小，隨便放張尺寸不超過父容器的圖片上去都能做到居中。另外，兼容性好，IE6 都是能順利兼容的。代碼如下：

實例

p {

 position:absolute;

 top:50%;

 left:50%;}

.show-img {

 position:absolute;

 right:50%;

 bottom:50%;}


效果如下所示：

微信截圖_20201112111221

transform居中

上面講到的 div 居中的例子中，div 的寬度都是固定的，然而實際項目中，有可能遇到不定寬的 div，特別是響應式或者移動端的設計中，更加常見。所以下面介紹一種不需要定寬的 div 水平垂直居中方法。 
先上代碼：

實例

.children-inline {

 position: relative;

 left: -50%;

 -webkit-transform : translate3d(0, -50%, 0);

 transform : translate3d(0, -50%, 0);

 background-color: black;

 color:white;

}


效果如下所示：

微信截圖_20201112111417

首先我們利用float，將需要居中的div的父 div 也就是children的寬度收縮，然后left:50%,將children的左邊與水平中線對齊。這個時候，還沒有真正居中，我們需要將children-inner左移動 -50%，這樣就水平居中了。 

再來說說垂直方向，先將children的 top 設為50%，然后其上邊和垂直中線對齊了，同樣，我們需要將children-inner上移動 -50%。但是這個 50% 是計算不出來的，所以我們用到了transform : translate3d(0, -50%, 0); 
這個方法非常好用噢。

flex居中

最后來介紹一下 CSS3 中的display:flex來實現的水平垂直居中的方法。

實例

.parent {

 display:flex;

 align-items: center;/*垂直居中*/

 justify-content: center;/*水平居中*/

 width:100%;

 height:100%;

 background-color:red;

}


效果如下所示：

微信截圖_20201112111606
這種方式最為簡便，就是兼容性不好，不過隨著時間的前進，各大瀏覽器一定會都兼容的。

擴展閱讀

flex 除了可以用于表示居中之外，它還是一個強大的開源應用程序框架，允許使用相同的編程模型，工具和代碼庫構建針對瀏覽器，移動設備和桌面的傳統應用程序。你可以在本站的《Flex教程》中掌握更多有關于Flex框架的詳細信息。