水平居中

1.行内元素水平居中

利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。 此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。

1
2
3
4
5
.parent{
        //在父容器设置
        text-align:center;
    }

此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。

1
2
3
4
5
6
7
8
9
10
11
<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent{
    text-align:center;  
  }
  .child {
    display: inline-block;
  }
</style>

2.块级元素的水平居中

①、 将该块级元素左右外边距margin-left和margin-right设置为auto

1
2
3
4
.child{
    width: 100px;//确保该块级元素定宽
    margin:0 auto;
}

②、使用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>

③、使用absolute+transform

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .child {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  .parent {
    position:relative;
  }
</style>

④、使用flex+justify-content

1
2
3
4
5
6
7
8
9
10
<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: flex;
    justify-content:center;
  }
</style>

⑤、使用flex+margin

1
2
3
4
5
6
7
8
9
10
11
12
<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: flex;
  }
  .child {
    margin:0 auto;
  }
</style>

3、多块级元素水平居中

①、利用flex布局

1
2
3
4
#container {
    display: flex;
    justify-content: center;
}

②、利用inline-block

1
2
3
4
5
6
.container {
text-align: center;
}
.inline-block {
display: inline-block;
}

4、浮动元素水平居中

①、定宽的非浮动元素

1
2
3
4
5
6
7
8
.child {
   position:relative;
   left:50%;
   margin-left:-250px;
}
<div class="parent">
  <span class="child" style="float: left;width: 500px;">我是要居中的浮动元素</span>
</div>

②、不定宽的浮动元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="box">
    <p>我是浮动的</p>
    <p>我也是居中的</p>
</div>
.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}

③、通用办法flex布局(不管是定宽还是不定宽)

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
    display:flex;
    justify-content:center;
}
.chlid{
    float: left;
    width: 200px;//有无宽度不影响居中
}
<div class="parent">
  <span class="chlid">我是要居中的浮动元素</span>
</div>

5、绝对定位元素水平居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="parent">
    <div class="child">让绝对定位的元素水平居中对齐。</div>
</div>
  .parent{
        position:relative;
    }
   .child{
         position: absolute; /*绝对定位*/
         width: 200px;
         height:100px;
         background: yellow;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此处不能省略，且为0*/
         right: 0;/*此处不能省略，且为0*/
    }

垂直居中

1.单行内联元素垂直居中

1
2
3
4
5
6
7
8
9
10
11
<div id="box">
     <span>单行内联元素垂直居中。</span>。
</div>
<style>
 #box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
    }
</style>

2.多行内联元素垂直居中

①、利用flex布局（flex）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
    .parent { 
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 2px dashed #f69c55;
    }
</style>

②、利用表布局（table）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="parent">
    <p class="child">The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>

3 块级元素垂直居中

①、使用absolute+负margin(已知高度宽度)

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="parent">
    <div class="child">固定高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

②、使用absolute+transform

1
2
3
4
5
6
7
8
9
10
11
12
<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

③、使用flex+align-items

1
2
3
4
5
6
7
8
<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
    display:flex;
    align-items:center;
}

④、使用table-cell+vertical-align

1
2
3
4
5
6
7
8
9
10
<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

水平垂直居中

1、绝对定位与负边距实现（已知高度宽度）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// css部分
 #container {
      position: relative;
    }
 #center {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;
    }
    
// html部分(这部分不做变化,下面例子直接共用)
<body>
  <div id='container'>
    <div id='center' style="width: 100px;height: 100px;background-color: #666">center</div>
  </div>
</body>

2、绝对定位与margin:auto（已知高度宽度）

1
2
3
4
5
6
7
8
9
10
11
12
#container {
     position: relative;
     height:100px;//必须有个高度
   }
#center {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;//注意此处的写法
   }

3、绝对定位+CSS3(未知元素的高宽)

1
2
3
4
5
6
7
8
9
10
#container {
    position: relative;
  }
#center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

4、flex布局

1
2
3
4
5
6
7
#container {//直接在父容器设置即可
   height: 100vh;//必须有高度
   display: flex;
   justify-content: center;
   align-items: center;
 }

5、flex/grid与margin:auto(最简单写法)

1
2
3
4
5
6
7
8
#container {
    height: 100vh;//必须有高度
    display: grid;
  }
#center {
    margin: auto;
  }