css布局

css

1.居中方案：

1
2
3
4
5
6
7
8
9
10
<div class="wrapper">
  <span>cool</span>
</div>
<style type="text/css">
  .wrapper {
    display: table-cell;
    vertical-align: center;
    text-align: center;
  }
</style>

或者flex布局：

1
2
3
4
5
6
7
8
9
10
11
<div class="wrapper">
  <span>cool</span>
</div>
<style type="text/css">
  .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
</style>

绝对布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="wrapper">
  <span>cool</span>
</div>
<style type="text/css">
  .wrapper {
    position: relative;
  }
  .wrapper span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

2.文字两端对齐：

1
text-align: justify;