# 水平居中
# 行内元素 - 使用 text-aligin
.parent { | |
text-align: center; | |
} |
# 块级元素 - 使用 margin
# 子元素没有设置 float
.son { | |
margin: 0 auto; | |
} |
# 子元素设置了 float
.parent{ | |
width: fit-content; | |
margin: 0 auto; | |
} | |
.son { | |
float: left; | |
} |
# 块级元素 - 使用定位
.son { | |
position: absolute; | |
left: 50%; | |
transform: translate(-50%, 0); | |
} |
# 块级元素 - 使用 grid
.parent { | |
display: grid; | |
justify-content: center; | |
} |
# 垂直居中
# 行内元素 - line-height
.parent { | |
height: 高度x; | |
} | |
.son { | |
line-height: 高度x; | |
} |
注意只对单行文本起效
# 块级元素 - table
.parent { | |
display: table; | |
} | |
.son { | |
display: table-cell; | |
vertical-align: middle; | |
} |
# 块级元素 - flex
.parent { | |
display: flex; | |
align-items: center; | |
} |
# 块级元素 - absolute 定位
.son { | |
position: absolute; | |
top: 50%; | |
transform: translate( 0, -50%); | |
} |
# 块级元素 - 使用 grid
.parent { | |
display: grid; | |
align-items: center; | |
} |
