如何在屏幕上居中键入js

Question

我输入了动画，我试图让它在水平和垂直方向都居中。这是我到目前为止的尝试：

＆＃13;

＆＃13;

$(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() {}
	});
});

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我正在尝试对css进行更改，但它看起来不太好，所以ar

Answer 1

这应该这样做：

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>