对于行内元素
text-align: center;
1
对于确定宽度的块级元素
margin: 0 auto
.center {
width: 960px;
margin-left: auto;
margin-right: auto;
}
1
2
3
4
5
2
3
4
5
绝对定位和 margin-left: -(宽度值/2)
.content {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px; /* 该元素宽度的一半,即100px */
background-color: aqua;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
absolute + margin:auto
.content {
position: absolute;
width: 200px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
对于未知宽度的块级元素
table 标签配合 margin 左右 auto 实现水平居中
使用 table 标签(或直接将块级元素设值为 display:table),再通过给该标签添加左右 margin 为 auto
inline-block+text-align
display:inline-block;(或 display:inline)和 text-align:center;实现水平居中,如何解决 inline-block 元素的空白间距
绝对定位+transform
.content {
position: absolute;
left: 50%;
transform: translateX(-50%); /* 移动元素本身50% */
background: aqua;
}
1
2
3
4
5
6
2
3
4
5
6
flex
.contentParent {
display: flex;
flex-direction: column;
}
.content {
align-self: center;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.contentParent {
display: flex;
}
.content {
margin: auto;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
grid
【1】在网格容器上设置 justify-items 或 justify-content
<style>
.parent {
display: grid;
justify-items: center;
/*justify-content:center;*/
}
</style>
1
2
3
4
5
6
7
2
3
4
5
6
7
2】在网格项目中设置 justify-self 或者 margin: 0 auto
<style>
.parent {
display: grid;
}
.child {
justify-self: center;
/*margin: 0 auto;*/
}
</style>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
fit-content+margin
.content {
width: fit-content;
margin-left: auto;
margin-right: auto;
}
1
2
3
4
5
2
3
4
5