javascript - 如何在屏幕上居中键入的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"],
		// Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
		stringsElement: null,
		// typing speed
		typeSpeed: 30,
		// time before typing starts
		startDelay: 1200,
		// backspacing speed
		backSpeed: 20,
		// time before backspacing
		backDelay: 500,
		// loop
		loop: true,
		// false = infinite
		loopCount: 15,
		// show cursor
		showCursor: false,
		// character for cursor
		cursorChar: "|",
		// attribute to type (null == text)
		attr: null,
		// either html or text
		contentType: 'html',
		// call when done callback function
		callback: function() {},
		// starting callback function before each string
		preStringTyped: function() {},
		//callback for every typed string
		onStringTyped: function() {},
		// callback for reset
		resetCallback: function() {}
	});
});

.text{
position: absolute;
left: 120px;
top: 100px;

}

<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>

我正在尝试在CSS上进行更改，但效果不好，所以ar

最佳答案

应该这样做：

h1 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

$(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"],
		// Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
		stringsElement: null,
		// typing speed
		typeSpeed: 30,
		// time before typing starts
		startDelay: 1200,
		// backspacing speed
		backSpeed: 20,
		// time before backspacing
		backDelay: 500,
		// loop
		loop: true,
		// false = infinite
		loopCount: 15,
		// show cursor
		showCursor: false,
		// character for cursor
		cursorChar: "|",
		// attribute to type (null == text)
		attr: null,
		// either html or text
		contentType: 'html',
		// call when done callback function
		callback: function() {},
		// starting callback function before each string
		preStringTyped: function() {},
		//callback for every typed string
		onStringTyped: function() {},
		// callback for reset
		resetCallback: function() {}
	});
});

h1 {
  min-height: 100vh;
  margin: 0;                /* optional: */
  padding: 50px;            /* optional: */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
body {
  margin: 0;                /* needed on SO */
}
.text {
  border: 1px solid red;    /* not needed */
  padding: 1rem;            /* not needed */
  text-align: center;       /* optional!? */
}

<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>