前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】

🚀作者简介

主页：水香木鱼的博客

专栏：CSS3

能量：🔋容量已消耗1%，自动充电中…

笺言：用博客记录每一次成长，书写五彩人生。

📒技术聊斋

（一）水平居中

1、text-align: center

 <div class="wrapper wrapper1">
    <span>行内，text-align: center;span>
  div>
1
2
3

.wrapper1 {
  text-align: center;
}
1
2
3

效果：

2、margin: 0 auto;

<div class="wrapper wrapper2">
    <div>
      块元素
      <p>（定宽度）p>
      <p>margin: 0 autop>
    div>
  div>
1
2
3
4
5
6
7

.wrapper2 div {
  width: 100px;
  margin: 0 auto;
}
1
2
3
4

效果：

3、 text-align: center + display: inline;【无宽高时使用】

 <div class="wrapper wrapper3">
    <div>块元素（不定宽度）div>
  div>
1
2
3

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

效果：

4、justify-content: center【flex实现】

 <div class="wrapper wrapper4">
    <div>
      块元素
      <p>flex实现p>
      <p>（定不定宽度可以）p>
    div>
 div>
1
2
3
4
5
6
7

.wrapper4 {
  display: flex;
  justify-content: center;
}
1
2
3
4

效果：

（二）垂直居中

1、line-height【行高实现】

 <div class="wrapper wrapper5">
    <span>单行的行内元素，设置行高span>
  div>
1
2
3

.wrapper5 {
  line-height: 150px;
}
1
2
3

效果：

2、display: table-cell; vertical-align: middle;

 <div class="wrapper wrapper6">
    <span>多行的行内元素，多行的行内元素，
          多行的行内元素，多行的行内元素，
          多行的行内元素，多行的行内元素
    span>
  div>
1
2
3
4
5
6

.wrapper6 {
  display: table-cell;
  vertical-align: middle;
}
1
2
3
4

效果：

3、 position: absolute; top: 50%; margin-top: -50px;【定位实现】

<div class="wrapper wrapper7">
    <div>块级元素（定高度）div>
  div>
1
2
3

.wrapper7 {
  position: relative;
}
.wrapper7 div {
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}
1
2
3
4
5
6
7
8
9

效果：

4、align-items: center;【flex实现】

 <div class="wrapper wrapper8">
    <div>
      块级元素
      <p>flex实现p>
      <p>（定不定高度可以）p>
    div>
  div>
1
2
3
4
5
6
7

.wrapper8 {
  display: flex;
  align-items: center;
}
1
2
3
4

效果：

（三）水平垂直居中

1、已知宽高【定位+margin：auto】

  <div class="wrapper wrapper9">
    <div>
      块级元素
      <p>已知宽高p>
    div>
  div>
1
2
3
4
5
6

.wrapper9 {
  position: relative;
}
.wrapper9 div {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

效果：

2、已知宽高【定位+外边距】

 <div class="wrapper wrapper10">
    <div>
      块级元素
      <p>已知宽高p>
    div>
  div>
1
2
3
4
5
6

.wrapper10 {
  position: relative;
}
.wrapper10 div {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
1
2
3
4
5
6
7
8
9
10
11
12

效果：

3、未知宽高【定位+transform】

  <div class="wrapper wrapper11">
    <div>
      块级元素
      <p>未知宽高p>
    div>
  div>
1
2
3
4
5
6

.wrapper11 {
  position: relative;
}
.wrapper11 div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
1
2
3
4
5
6
7
8
9

效果：

4、未知宽高【flex实现】

  <div class="wrapper wrapper12">
    <div>
      块级元素
      <p>flex实现p>
      <p>未知宽高p>
    div>
  div>
1
2
3
4
5
6
7

.wrapper12 {
  display: flex;
  justify-content: center;
  align-items: center;
}
1
2
3
4
5

效果：

---

📓精品推荐

🔋前端css解决z-index 上层元素遮挡下层元素的方法

🔋前端css解决背景图、图片自适应的问题【通用】

🔋盘点，这些年你知道的鼠标移入显示小手图标的css的cursor 属性，你还记得吗？

🔋前端vue项目最强优化-美化浏览器右侧滚动条样式与el-scrollbar

🔋前端css3实现角标【二维式与立体式角标实现】

---

木鱼谢语：感谢各位技术大牛们的点赞👍收藏🌟，每一期都会为大家带来快速适用于业务的文章，让大家做到cv即可。