国产又粗又长又猛又爽,久久夜色精品国产欧美一区麻豆,性爱无码高清视频,久久成人小电影,麻豆你懂的,麻豆A片,精品欧美一区二区三区久久久,欧美午夜AⅤ无码精品色情综艺

來源 |?https://wintc.top/article/4

CSS控制居中是前端開發(fā)中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。

談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。

由于HTML文檔流是水平方向的，所以水平方向上的布局控制比垂直方向要簡單很多，居中也是如此。

不過（水平）垂直居中還是有很多種寫法，至少一只手是數(shù)不過來了，本文列出幾種，并進(jìn)行了簡單比較。

一、水平居中

使用CSS控制水平居中很簡單：

塊級元素設(shè)置width,并設(shè)置margin auto
內(nèi)聯(lián)元素父元素設(shè)置text-align center

HTML代碼如下:

1、塊級元素水平居中

.container {  height: 300px;  width: 300px;  border: 1px solid red;}
.content {  width: 10rem;  border: 1px solid green;  margin: 0 auto;}

效果：

2、內(nèi)聯(lián)元素水平居中

.container {  height: 300px;  width: 300px;  border: 1px solid red;  text-align: center;}
.content {  display: inline-block;  border: 1px solid green;}

效果：

代碼很簡單，而且沒什么兼容性問題，所以通常也不需要用別的復(fù)雜方式來實(shí)現(xiàn)水平居中效果。

二、水平垂直居中

使用CSS控制垂直居中（或者水平垂直居中）就不像控制垂直居中那么方便，這里主要羅列幾種。

1、flex布局

flex布局出現(xiàn)以后，垂直居中就很方便了，直接設(shè)置父元素：

display: flexalign-items: center

如果同時(shí)要水平居中，則同時(shí)設(shè)置：justify-content center ，需要注意的是IE10+才支持，webkit前綴瀏覽器設(shè)置flex屬性需要加webkit。

.container {    width: 300px;    height: 300px;    border: 1px solid red;    display: -webkit-flex;    display: flex;    // 關(guān)鍵屬性    align-items: center; // 垂直居中    justify-content: center // 水平居中  }
  .content {    border: 1px solid green;  }

效果：

2、?margin+ position:absolute布局

position: absolute布局的元素，通過設(shè)置top/bottom, left/right這兩對屬性，可以讓元素在垂直方向和水平方向分別具有了自適應(yīng)的特性。就像div在水平方向的默認(rèn)表現(xiàn)一樣!

上文中對于塊級元素的水平居中，我們設(shè)置寬度然后配合以margin可以實(shí)現(xiàn)水平居中。而對于設(shè)置了top/bottom,left/right的absolute定位元素，我們設(shè)置寬高再配合margin就可以達(dá)到水平垂直居中：

.container {  width: 300px;  height: 300px;  position: relative;  border: 1px solid red;}
.content {  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;  width: 200px;  height: 100px;  margin: auto;  border: 1px solid green;}

效果：

兼容性很好，IE8以上支持。

3、?transform + absolute

absolute定位元素的left、top屬性是子元素的左邊界、上邊界相對父元素進(jìn)行定位；transform是CSS3中非常強(qiáng)大的一個(gè)屬性，可以接收多個(gè)屬性值，包括旋轉(zhuǎn)、縮放、平移等多種功能。

這里使用二者配合，先將子元素左上定點(diǎn)定位到父元素中心點(diǎn)，再使用transform將子元素中心點(diǎn)移動到父元素的中心點(diǎn)即可：

.container {  width: 300px;  height: 300px;  position: relative;  border: 1px solid red;}
.content {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  border: 1px solid green;}

效果：

這個(gè)方法有個(gè)小缺陷，就是translate函數(shù)的參數(shù)，最后的計(jì)算值不能為小數(shù)，否則有的瀏覽器渲染出來效果會模糊，所以使用本方法的話最好設(shè)置一下寬高為偶數(shù)。

4、absolute+margin負(fù)值

與上一種方法很類似，上一種方法是使用transform將元素向左上平移，本方法則是使用margin負(fù)值的方式將元素拉向左上角。
代碼：

.container {  width: 300px;  height: 300px;  position: relative;  border: 1px solid red;}
.content {  position: absolute;  left: 50%;  top: 50%;  width: 200px;  height: 100px;  margin-top: -50px;  margin-left: -100px;  border: 1px solid green;}

效果：

5、absolute + calc

從上兩種方法可以看到，absolute設(shè)置了left和top再通過平移或者margin將元素重新定位回去。如果我們直接可以計(jì)算出正確的left和top值，豈不是一次到位？calc函數(shù)正有此功能，當(dāng)然我們需要知道子元素的寬高：

.container {  width: 300px;  height: 300px;  border: 1px solid red;  text-align: center;  position: relative;}
.content {  position: absolute;  border: 1px solid green;  width: 200px;  height: 100px;  left: calc(50% - 100px);  top: calc(50% - 50px);}

效果：

6、?line-height + vertical-align

vertical-align是一個(gè)作用于內(nèi)聯(lián)元素的屬性。內(nèi)聯(lián)元素的特性是會和其它內(nèi)聯(lián)元素或者文字在同一行顯示，但是默認(rèn)情況下是與父元素“基線對齊”的。

這里的的基線指的是父元素每一行中的一個(gè)垂直位置，是英文ｘ下邊緣所在的水平, 通過設(shè)置vertical-align為middle可以將內(nèi)聯(lián)元素的中部對齊父元素的中部（基線+字母ｘ的一半高度）。

所以可以利用這一點(diǎn)，將父元素的行高設(shè)置為其自身高度，然后將子元素與父元素中線對齊，即可實(shí)現(xiàn)垂直居中。
代碼：

.container {  width: 300px;  height: 300px;  border: 1px solid red;  line-height: 300px;  text-align: center;}
.content {  display: inline-block;  line-height: 1.5;  border: 1px solid green;  vertical-align: middle;}

效果：

以上幾種方法各有不同的適用條件，因此也有不同的優(yōu)缺點(diǎn)，下表對各種方法進(jìn)行了比較：

CSS中同一種表現(xiàn)效果往往有多種不同的實(shí)現(xiàn)方法，要刻意地嘗試多種寫法，避免熟悉了一兩種方法就止步不前，這樣才能對各種情況得心應(yīng)手。

本文完~

CSS垂直居中，你會多少種寫法？

一、水平居中

1、塊級元素水平居中

2、內(nèi)聯(lián)元素水平居中

二、水平垂直居中

1、flex布局

2、?margin+ position:absolute布局

3、?transform + absolute