居中布局在實際場景中很常見，在面試當中也經常會被考察，
以下分別是水平居中和垂直居中常用的樣式，
水平居中
margin: 0 auto; + width 應用于塊級元素居于容器中間
- 若節點不是塊級元素，需宣告
display: block - 若節點寬度已隱式宣告則無需顯式宣告
width
<div >
<p>談笑有鴻儒，往來無白丁，談笑有鴻儒，往來無白丁，</p>
</div>
.h-c1 {
margin: 0 auto;
width: fit-content; // 300px;
background-color: #fcc;
}
text-align: center; 應用于行內元素居中
- 父節點宣告
text-align - 若節點不是行內元素需宣告
display: inline/inline-block
使行內元素居于父級容器中間，可用于使文本內容水平居中，
<div >
<span>談笑有鴻儒，往來無白丁，談笑有鴻儒，往來無白丁，</span>
</div>
.h-c3 {
text-align: center;
background-color: #fc0;
}
position + left/right + margin-left/right + width：應用于全部元素
- 適用于父子元素的寬度都確定的情況
- 子絕父相，父：
position: relative，子：position: absolute，
<div >
<div >
<span>談笑有鴻儒，往來無白丁，談笑有鴻儒，往來無白丁，</span>
</div>
</div>
.h-c4 {
position: relative;
width: 500px; /*或者寬度隱式宣告*/
height: 30px;
.h-c4-child {
position: absolute;
width: 300px;
left: 50%; /* 相對于父元素的寬度 */
margin-left: -150px; /* 子元素寬度的一半的負數 */
background-color: #fbf;
}
}
position + left/right + transform: translateX(-50%)：應用于全部元素
- 適用于父元素寬度確定的情況
- 子元素未設定寬度時，默認為父元素寬度的一半
- 子絕父相，父：
position: relative，子：position: absolute，
<div >
<p >談笑有鴻儒，往來無白丁，談笑有鴻儒，往來無白丁，</p>
</div>
.h-c5 {
position: relative;
width: 600px; /*或者寬度隱式宣告*/
height: 50px;
background-color: #fbe;
.h-c5-child {
position: absolute;
left: 50%; /* 相對于父元素的寬度 */
transform: translateX(-50%); /* 相對于自己的寬度 */
background-color: #fbf;
}
}
display: flex + justify-content: center：應用于全部元素的子節點（彈性布局）
<div >
<p>談笑有鴻儒，往來無白丁，談笑有鴻儒，往來無白丁，</p>
</div>
.h-c6 {
display: flex;
justify-content: center;
background-color: yellowgreen;
}
垂直居中
padding-top/bottom：應用于塊級元素
- 父元素高度由子元素高度撐開（自適應）
- 子元素設定
padding-top和padding-bottom相等 - 若節點不是塊級元素需宣告
display: block
<div >
<div >
<span>談笑有鴻儒，往來無白丁，談笑有鴻儒，往來無白丁，</span>
</div>
</div>
.v-c1 {
background-color: #ffcc00;
.v-c1-child {
padding: 20px 0;
background-color: #fff;
background-clip: content-box;
}
}
line-height：應用于行內元素
- 父節點宣告
line-height，line-height與height相等 - 若節點不是行內元素需宣告
display: inline/inline-block
使行內元素居于父級容器中間，可用于使文本內容垂直居中，
<div >
<span>談笑有鴻儒，往來無白丁，談笑有鴻儒，往來無白丁，</span>
</div>
.v-c2 {
height: 100px;
line-height: 100px;
background-color: #6666ff;
span {
display: inline-block; /* 或inline */
height: 30px;
line-height: 30px;
vertical-align: middle; /* 行內塊級元素與匿名行內盒的基線對齊存在很大差異，所以需宣告vertical-align:middle將其調整到垂直居中的位置 */
background-color: red;
}
}
display: table + display: table-cell + vertical-align: middle：應用于全部元素
<div >
<div >display:table + display:table-cell + vertical-align:middle</div>
</div>
.v-c3 {
display: table;
height: 100px;
background-color: #6666ff;
.v-c3-child {
display: table-cell;
height: 50px; /* 設定高度無用，會與父節點高度一樣 */
vertical-align: middle;
background-color: red;
}
}
display: table-cell + vertical-align: middle：應用于全部元素的子節點
- 父節點宣告
display: table-cell模擬表格布局的垂直居中
<div >
<div>display:table-cell + vertical-align:middle</div>
</div>
.v-c4 {
height: 100px;
display: table-cell;
vertical-align: middle;
background-color: bisque;
}
position + top/bottom + margin-top/bottom + height：應用于全部元素
- 適用于父子元素的高度都確定的情況
- 子絕父相，父：
position: relative，子：position: absolute，
<div >
<div >position + top/bottom + margin-top/bottom + height</div>
</div>
.v-c5 {
position: relative;
height: 100px;
background-color: coral;
.v-c5-child {
position: absolute;
top: 50%; /* 相對于父元素的高度 */
height: 70px;
margin-top: -35px; /* 子元素高度的一半的負數 */
background-color: #6666ff;
}
}
position + top/bottom + transform: translateY(-50%)：應用于全部元素
- 適用于父元素高度確定的情況
- 子絕父相，父：
position: relative，子：position: absolute，
<div >
<div >position + top/bottom + transform:translateY(-50%)</div>
</div>
.v-c6 {
position: relative;
height: 100px;
background-color: #ffcc00;
.v-c6-child {
position: absolute;
top: 50%; /* 相對于父元素的高度 */
transform: translateY(-50%); /* 相對于自己的高度 */
background-color: #6666ff;
}
}
display: flex + align-item: center：應用于全部元素的子節點（彈性布局）
<div >
<div>display: flex;</div>
<span>display: flex;</span>
</div>
.v-c7 {
display: flex;
align-items: center;
height: 100px;
background-color: #ffbb00;
}
display: flex + margin: auto 0：應用于全部元素
- 父節點宣告
display: flex; - 子節點宣告
margin: auto 0;
<div >
<span >display: flex; margin: auto 0;</span>
</div>
.v-c8 {
display: flex;
height: 100px;
background-color: #ffbbff;
.v-c8-child {
margin: auto 0; /* 只設定auto 可以讓水平和垂直都居中 */
}
}
父節點宣告display: flex生成FFC容器，子節點宣告margin: auto讓瀏覽器自動計算子節點到父節點邊上的距離，
本文來自博客園，作者：beckyye，轉載請注明原文鏈接：https://www.cnblogs.com/beckyyyy/p/16949838.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540061.html
標籤：Html/Css