# 水平居中
# 行内元素的水平居中
#container {
text-align: center;
}
# 块状元素的水平居中
#center {
margin: 0 auto;
}
# 多个块状元素的水平居中
#container {
text-align: center;
}
#center {
display: inline-block;
}
# Flex
#container {
display: flex;
justify-content:center;
}
# 已知高度的水平垂直居中
# 绝对定位与负边距实现
#container {
position: relative;
}
#center {
width: 100px;
height:100px;
position: absolute;
top: 50%;
left:50%;
margin: -50px 0 0 -50px;
}
# 未知宽度高度元素的水平垂直居中
# 绝对定位与 margin 实现
#container {
display: relative;
}
#center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
# 需要居中的元素是inline
或inline-block
#container {
dispaly: table-cell;
text-align: center;
vertical-align: middle;
}
# CSS3 的 transform
#container {
position: relative;
}
#center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(50%,50%);
}
# Flex 布局
#container {
display: flex;
justify-content: center;
align-items: center;
}
Last Update: 2019-12-06 12:56:15 Source File