前言

我们在设计网页时，会大量的运用到水平垂直居中，如果知道元素的宽高，那水平垂直居中是很简单的，无非是用一下margin就可以完成，这里就不向大家做过多的解释了。但是，如果不知道元素的宽高呢？ 是不是就会在这上面用点心思了，接下来我给大家介绍两种我设计网页时常用的两种不定宽高的元素水平居中方法吧，放心绝对容易记。

• 公众号：前端印象
• 不定时有送书活动，记得关注~
• 关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

正文

首先来创建一个html页面，html代码和css代码如下：

<div class="box"> <div class="content">我是box中的内容</div>
</div>
<style>
	.box{ width: 600px; height: 300px; background: lightgreen;
	}
	.content{ background: red;
	}
</style>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

效果图：

接下来我们就在这个基础上，对红色方框的元素标签进行水平垂直居中的操作

第一种方法

第一种方法我强烈推荐，用到了我们熟悉的flex布局。

• 元素标签内容

<div class="box"> <div class="content">我是box中的内容</div>
</div>

  

 

  
1
  
2
  
3
 

• 样式内容

.box{ width: 600px; height: 300px; background: lightgreen;
	/*以下三个样式就能实现水平垂直居中*/ display: flex; /*先开启flex布局*/ justify-content: center; /*实现水平居中*/ align-items: center; /*实现垂直居中*/
}
.content{ background: red;
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

• 效果图
  
  是不是非常的方便呢？只需要三个在外部元素标签设置三个样式就能实现内部元素的水平垂直居中。

第二种方法

第二种方法运用的就是定位和transform的知识来实现水平垂直居中

• 元素标签内容

<div class="box"> <span class="content">我是box中的内容</span>
</div>

  

 

  
1
  
2
  
3
 

• 样式内容

.box{ width: 600px; height: 300px; background: lightgreen; position: relative; /*外部元素开启relative定位*/
}
.content{ background: red; position: absolute; /*内部元素开启absolute定位*/ top: 50%; /*向下移动父级高度的50%*/ left: 50%; /*向右移动父级宽度的50%*/ transform: translate(-50%, -50%);  /*向上、向左移动自身高度、宽度的50%,即完成了*/
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

• 效果图
  
  同样的，跟第一种方式的效果一样，也完成了水平和垂直的居中。

结束语

这里只向大家介绍了两种我个人认为常用而且方便记住的方法，尤其是第一种方法，是我用的最最最最多的，希望这篇文章能帮助你们解决不定宽高元素水平垂直居中的问题。

文章来源: lpyexplore.blog.csdn.net，作者：「零一」，版权归原作者所有，如需转载，请联系作者。

原文链接：lpyexplore.blog.csdn.net/article/details/105941491