- 使用flexbox布局：将父元素的display属性设置为flex，然后使用justify-content和align-items属性将子元素居中。
display: flex;
justify-content: center;
align-items: center;
}
- 使用绝对定位和transform属性：将父元素的position属性设置为relative，子元素的position属性设置为absolute，然后使用top、bottom、left和right属性以及transform属性将子元素居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 使用表格布局：将父元素的display属性设置为table，然后使用display: table-cell和vertical-align: middle属性将子元素居中。
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
- 使用text-align和line-height属性：将父元素的text-align属性设置为center，然后将子元素的display属性设置为inline-block，并设置line-height属性等于父元素的高度。
text-align: center;
}
.child {
display: inline-block;
line-height: 100px; /* 假设父元素的高度为100px */
}
- 使用margin和auto：将父元素的display属性设置为flex，然后使用margin属性将子元素水平和垂直居中。
display: flex;
}
.child {
margin: auto;
}
- 使用flexbox和margin：将父元素的display属性设置为flex，然后使用margin属性将子元素水平和垂直居中。
display: flex;
justify-content: center;
align-items: center;
}
.child {
margin: auto;
}
- 使用flexbox和margin：将父元素的display属性设置为flex，然后使用margin属性将子元素水平和垂直居中。
display: flex;
justify-content: center;
align-items: center;
}
.child {
margin: auto;
}
- 使用绝对定位和margin：将父元素的position属性设置为relative，子元素的position属性设置为absolute，然后使用margin属性将子元素水平和垂直居中。
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
- 使用flexbox和margin: auto：将父元素的display属性设置为flex，然后将子元素的margin属性设置为auto，即可实现水平和垂直居中。
display: flex;
}
.child {
margin: auto;
}
