基础布局
首先来创建一个html页面，html代码和css代码如下：
<div class="box"> <div class="content">我是box中的内容</div></div><style> .box{ width: 600px; height: 300px; background: lightgreen; } .content{ background: red; }</style>
效果图：
我们可以看到，box内的内容是没有设置宽高的，这就叫做不定高，大家知道如何对其进行垂直水平居中吗？接下来我们就在这个基础上，对红色方框的元素标签进行水平垂直居中的操作
第一种方法
第一种方法我强烈推荐，用到了我们熟悉的flex布局。
- 元素标签内容
<div class="box"> <div class="content">我是box中的内容</div></div>
- 样式内容
.box{ width: 600px; height: 300px; background: lightgreen; /*以下三个样式就能实现水平垂直居中*/ display: flex; /*先开启flex布局*/ justify-content: center; /*实现水平居中*/ align-items: center; /*实现垂直居中*/}.content{ background: red;}
- 效果图
是不是非常的方便呢？只需要三个在外部元素标签设置三个样式就能实现内部元素的水平垂直居中。
第二种方法
第二种方法运用的就是 定位 和 transform 的知识来实现水平垂直居中
- 元素标签内容
<div class="box"> <span class="content">我是box中的内容</span></div>
- 样式内容
.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%,即完成了*/}
- 效果图
同样的，跟第一种方式的效果一样，也完成了水平和垂直的居中。
结束语
这里只向大家介绍了两种我个人认为常用而且方便记住的方法，尤其是第一种方法，是我用的最最最最多的，同时，虽然这是解决不定宽高标签元素的垂直水平居中，但是其实在已知宽的标签元素中也一样适用。希望这篇文章能帮助你们解决不定宽高元素水平垂直居中的问题。
