如何让Typed.js打字动画在屏幕上水平垂直居中？

我来帮你搞定这个居中难题！你之前用固定的left和top值肯定没法适配不同屏幕，下面给你两种靠谱的方案，都能让打字文本完美居中：

方案一：Flexbox布局（推荐） #

Flexbox是现在最简便的居中方式，只需要给父容器设置几个属性就行，还能自动适配各种屏幕尺寸。

修改你的CSS代码如下：

/* 先让html和body占满整个视口高度 */
html, body {
  height: 100%;
  margin: 0;
}

/* 给h1设置flex布局，让内部的.text元素居中 */
h1 {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%;
  margin: 0;
}

.text {
  /* 不需要再设置position: absolute和固定的left/top了 */
}

对应的完整代码示例：

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
<h1>
  <span class="text"></span>
</h1>

JS（保留你原来的代码即可） #

$(function(){
 $(".text").typed({
 strings: ["Lepson mosa losha ohyao", "Zin oh mosa lofoa kosha doa arosma notna loffshi", "Corsa tosm smflos slsfjs zofa ora toshsa lofasoz zohmrah cormasos asrsaos lofma toshm cerokc lsosa formas kaks in tososh fojus alsoma"],
 stringsElement: null,
 typeSpeed: 30,
 startDelay: 1200,
 backSpeed: 20,
 backDelay: 500,
 loop: true,
 loopCount: 15,
 showCursor: false,
 cursorChar: "|",
 attr: null,
 contentType: 'html',
 callback: function() {},
 preStringTyped: function() {},
 onStringTyped: function() {},
 resetCallback: function() {}
 });
 });

方案二：绝对定位 + Transform #

如果你不想用Flexbox，也可以用绝对定位配合transform来实现居中，这种方法兼容性也很好：

修改CSS如下：

html, body {
  height: 100%;
  margin: 0;
  position: relative; /* 给父容器设置相对定位，让.text的绝对定位基于它 */
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 通过translate把元素自身向左向上移动50%，实现精准居中 */
  transform: translate(-50%, -50%);
}

h1 {
  margin: 0;
}

原理说明 #

• 方案一的Flexbox通过justify-content: center和align-items: center直接让子元素在容器内水平垂直居中，代码简洁且响应式。
• 方案二的left:50%和top:50%是让元素的左上角移到容器中心，再通过transform: translate(-50%,-50%)把元素自身的中心移到容器中心，这样不管元素的宽度高度是多少，都能完美居中。

这两种方法都比你之前用固定left和top值的方式更灵活，适配各种屏幕尺寸~

内容的提问来源于stack exchange，提问作者user9269971