地狱猫

水平居中

1. 若是行内元素，给其父元素设置 text-align:center,即可实现行内元素水平居中

<style>
  body{
    background-color: #e9e9e9;
  }
  .wrap{
    background-color: yellow;
    width: 200px;
    height: 200px;

    text-align: center;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
<div class="wrap">
  <div>行内元素1</div>
  <span>行内元素2</span>
</div>
1
2
3
4

效果图

2. 若是行内元素，给父元素设置flex,即可实现行内元素水平居中

<style>
  body{
    background-color: #e9e9e9;
  }
  .wrap{
    background-color: yellow;
    width: 200px;
    height: 200px;

    display: flex;
    justify-content: center;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="wrap">
  <div>行内元素1</div>
  <span>行内元素2</span>
</div>
1
2
3
4

效果图

3. 若是块级元素, 该元素设置 margin:0 auto即可

<style>
  body{
    background-color: #e9e9e9;
  }
  .wrap{
    background-color: yellow;
    width: 200px;
    height: 200px;

    margin:0 auto;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
<div class="wrap">
</div>
1
2

效果图

4. CSS3 transform,该元素设置如下:

<style>
  body{
    background-color: #e9e9e9;
  }
  .parent{
    background-color: yellow;
    width: 200px;
    height: 200px;
  }
  .child{
    position:absolute;
    left:50%;
    transform:translate(-50%,0);
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="parent">
  <div class="child">行内元素1</div>
</div>
1
2
3

效果图

5. 使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:

<style>
  body{
    background-color: #e9e9e9;
  }
  .parent{
    background-color: yellow;
    width: 200px;
    height: 200px;
  }
  .child{
    position:absolute;
    width:100px;
    left:50%;
    margin-left:-50px;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="parent">
  <div class="child">行内元素1</div>
</div>
1
2
3

效果图

6. 使用绝对定位方式, 以及left:0;right:0;margin:0 auto; , 子元素设置如下:

<style>
  body{
    background-color: #e9e9e9;
  }
  .parent{
    background-color: yellow;
    width: 200px;
    height: 200px;
  }
  .child{
    position:absolute;
    width:100px;
    left:0;
    right:0;
    margin:0 auto;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="parent">
  <div class="child">行内元素1</div>
</div>
1
2
3

效果图

← 垂直居中→