大误：已经会了？

不经意间，就发现错过了很多美好的事情

今天，坐在公交车上，转头望去，路边的玫瑰都快开败了，但是，我甚至不知道，它什么时候开的；

今年年初，3月份的时候，跟朋友一起报了个资质考试，突然发现，还有两个礼拜就该考试了，但是，我连一套完整的试题都还没做完；

就上周五，我碰到一个问题，花了我好长时间，才解决，所以想做一个归纳，主要怕时间流逝，他也随之走了，所以记下来。

在写前端页面的时候，我想大家都遇到过文字居中的问题吧，我遇到的就是在不确定文字多少以及会不会换行的情况下，让文字在width：80px;height:60px;的div内，水平及垂直居中；我总结了一下，

第一种情况：宽高确定

这是我想要达成的效果

垂直水平居中，且文字数量确定。

这是布局，需要嵌套一个div，确定左边的背景色，

这是样式，需要给children给宽度，无论px或者%都可以。

第一种情况：确定文字数量（宽度一定，高度一定）第一种情况：确）

第二种情况：高度一定，宽度未定

这是我想要达成的效果

我用了两种方式分别居中了左面的问题和右面的答案

这是页面布局（当然，如果不考虑右侧答案的居中方法，可以直接在number里面填入答案，用问题的方法居中也可以）

这是页面样式，我备注了使用定位居中时，必须要固定宽高，可能有人有疑问

A：网上有一种说法是：定位之后使用transform:translate(-50%,-50%)属性，但我试了没有效果。

B：如果没有固定宽高，可以js获取div宽高，这也是个办法，但是如果都会用js获取宽高，也就不会有这个问题了。（主要其实是 我不会啊）

第三种情况：宽高都不确定

这是我想要达成的效果

使用同一class或者id,让内容始终保持水平垂直居中

这是页面布局，实际情况下，如果要使用这种，都不会直接页面上这样布局，都是js拼接的，数据也是后台调取，所以宽高都不确定，并且不能单独写样式

这是统一写的样式，主要是问题div 使用flex布局，align-items、justify-content都是flex布局属性，使用的时候必须要写明flex布局，Webkit内核的浏览器，必须加上-webkit前缀。

先整理这三种方法，希望有所帮助。