前端进阶系列—常见布局及居中

水平居中布局

margin+定宽

1
2
3
4
5
6
7
8
9
10
<div class="parent">
<div class="child">Demo</div>
</div>

<style>
.child {
width: 100px;
margin: 0 auto;
}
</style>
  • 想必是个前端都见过,这定宽的水平居中,我们还可以用下面这种来实现不定宽

table+margin

1
2
3
4
5
6
7
8
9
10
<div class="parent">
<div class="child">Demo</div>
</div>

<style>
.child {
display: table;
margin: 0 auto;
}
</style>
阅读更多