css-水平居中、垂直居中（初級篇）

工地程式設計_大奶夫發表於2017-12-18
CSS

有哪裡不懂的，請在下面留言，我每天都看，有時間我會一一解答，看評論區也許有人提出了跟你同樣想問的問題，可以看看我給出的回答，不用重複提問。
原文參考地址

不說廢話直接開始。

單行文字垂直居中

#kexuejiafivefiveopen {
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: pink;
    color: gray;
}

<div id="kexuejiafivefiveopen">
    <p>單行文文字垂直居中</p>
</div>
複製程式碼

css-水平居中、垂直居中（初級篇）

  • 此方法只適用於單行且較短的文字，如果是多行文字或單行較長的文字則會溢位
  • 單行短文字居中的重點在於文字的基線（自行百度），文字的行高和容器的高度達到一致，由於文字的基線問題則該文字垂直居中
  • line-height是可以繼承的，line-height細節十分講究請自行查閱相關資料

多行文字塊display：table垂直居中

#cixitaihou {
    width: 600px;
    height: 100px;
    background: pink;
    color: gray;
    overflow: hidden;
    display: table;
}

#uhuang {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    background: yellow;
}

<div id="cixitaihou">
    <p id='uhuang'>多行文字table塊垂直居中</p>
</div>
複製程式碼

css-水平居中、垂直居中（初級篇）

  • 此方法適用於多行文字塊居中
  • 此方法利用了display:table的特性給父盒子轉換為table給盒子設定table-cell加上vertical-align:center，vertical-align屬性十分講究請自己查閱相關資料

absolute居中-上下左右0+margin：auto

#fuck {
    width: 400px;
    height: 100px;
    background: pink;
    position: relative;
}

#fuck .you {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 50px;
    width: 50%;
    background: yellow;
    color: gray;
}

<div id="fuck">
    <div class="you">absolute上下左右0配合margin:auto</div>
</div>
複製程式碼

css-水平居中、垂直居中（初級篇）

  • 此方法重點在於absolute在父盒子裡的top，right，bottom，left的值均為零，同時要設定margin:auto
  • 有個小細節是.you盒子的高度是百分比，說明百分比的盒子也適用於這種方法

absolute+transform居中

#fuck {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
}
 
#fuck .you {
    position: absolute;
    left: 50%;
    top: 50%;
    background: #999;
    transform: translateX(-50%) translateY(-50%);
}

<div id="fuck">
    <div class="you">absolute+transform居中</div>
</div>
複製程式碼

css-水平居中、垂直居中（初級篇）

  • left:50%,top:50%是基於.you的最左上角定點移動,transform: translateX(-50%) translateY(-50%);是把.you自身的50%進行移動，因為left:50%,top:50%移動過頭了，所以要用 translateX和Y設定為負值反向退回來從而達到居中

absolute固定自減居中

#fuck {
    width: 400px;
    height: 100px;
    background: pink;
    color: gray;
    position: relative;
    }

#fuck .you {
    height: 50px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -100px;
    background: yellow;
}

<div id="fuck">
    <div class="you">塊區域垂直居中</div>
</div>
複製程式碼

css-水平居中、垂直居中（初級篇）

  • 這個方法只適合在你這個東西固定寬高的情況下使用，道理和上面translate一樣，left和right移動了50%再用負值的margin拉回來
  • 在使用margin的時候有可能會頂開或者遮蓋住其他元素，看情況使用。

margin填充居中

#fuck {
    width: 400px;
    height: 100px;
    background: pink;
    color: gray;
    overflow: hidden;
}

#fuck .you {
    margin-left: auto;
    margin-right: auto;
    margin-top: calc((100px - 50px)/2);
    height: 50px;
    background: yellow;
}

<div id="fuck">
    <div class="you">margin:calc計算</div>
</div>
複製程式碼

css-水平居中、垂直居中（初級篇）

  • margin左右auto可以讓塊級元素水平居中，但是margin上下auto卻不能使其垂直居中，這個方法的前提是確定了父子盒子的高度用css3的計算calc計算出一個數值給margintop把自己頂下來，慎用。

相關文章