討論下垂直水平居中的多種方案
摘要：
寫部落格主要是用來總結、鞏固知識點，加深自己對這個知識點的理解。同時希望能幫助到有需要的人。如有不正確的地方。可以在評論區指出。你們的支援。是我不斷進步的源泉。
本來想把這個知識點放在這篇部落格中講的,但是這裡涉及的內容還挺多的。於是就把它單獨拉出來寫了。
簡單說明一下
下...
寫部落格主要是用來總結、鞏固知識點，加深自己對這個知識點的理解。同時希望能幫助到有需要的人。如有不正確的地方。可以在評論區指出。你們的支援。是我不斷進步的源泉。
本來想把這個知識點放在這篇部落格中講的,但是這裡涉及的內容還挺多的。於是就把它單獨拉出來寫了。
簡單說明一下
下面的內容使用到了flex的佈局方式。有關flex的詳細使用方法和相容性。這裡就不詳細講述了，可以看這篇文章
這裡討論的是子元素為塊級元素的水平垂直居中方案。其他行內元素的的方案可以看這大佬的文章16種方法實現水平居中垂直居中
寬高固定的元素如何進行垂直水平居中
1.使用絕對定位與負邊距實現
html:
<div class="parent"> <div class="child"></div> </div> 複製程式碼
css:
.parent {
position: relative;
width: 600px;
height: 600px;
margin: auto;
border: 1px solid red;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
border: 1px solid blue;
}
複製程式碼
原理：這個的實現方法原理還是很好理解的。相對父元素定位，距上邊和左邊個一半，然後在減去子元素的一半。
2.絕對定位與margin:auto實現水平垂直居中
css:
.parent {
position: relative;
width: 600px;
height: 600px;
margin: auto;
border: 1px solid red;
}
.child {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100px;
height: 100px;
border: 1px solid blue;
}
複製程式碼
原理：這個方法的實現原理看了張鑫旭大神的部落格自己還是一直半解的。如果有同學知道可以在評論區探討下。實現原理看這裡
未知寬高的元素如何進行水平垂直居中
1.無所不能的css3來實現
css:
.parent {
position: relative;
width: 600px;
height: 600px;
margin: auto;
border: 1px solid red;
}
.child {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid blue;
}
.method3 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
複製程式碼
原理：這種方法的實現原理其實跟固定寬高的方法一是一樣的。但是他有一個有點就是不需要知道元素的寬高。主要是通過transform中translate偏移的百分比值是相對於自身大小的。所以就可以實現不知道寬高還是可以實現垂直水平居中。
2.flex實現水平垂直居中
css:
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 600px;
margin: auto;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid blue;
}
複製程式碼
原理：通過justify-content和align-items兩個屬性來實現水平垂直居中，一個定義的是水平軸山上的對齊方式，另一個則定義的是垂直軸上的對齊方式。
詳細程式碼在這裡：github.com/Leo928/html…
以上部分內容參考自其它文章。可以點選連結檢視原文。
最後：如果講訴不當的地方。請在評論區指出。你們的支援，是我不斷進步的源泉。
參考資料