json 垂直定心 - 绝对定位方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了json 垂直定心 - 绝对定位方法相关的知识,希望对你有一定的参考价值。

/**
 * Vertical centering - absolute positioning method
 */

main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	padding: 1em 1.5em;
	box-sizing: border-box;
	background: #655;
	color: white;
	text-align: center;
}

h1 {
	margin: 0 0 .2em;
	font-size: 150%;
}

p {
	margin: 0;
}

body {
	background: #fb3;
	font: 100%/1.5 sans-serif;
}
<main>
	<h1>Am I centered yet?</h1>
	<p>Center me, please!</p>
</main>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

以上是关于json 垂直定心 - 绝对定位方法的主要内容,如果未能解决你的问题,请参考以下文章

绝对定位情况下水平垂直居中小技巧

将一个不定宽高的盒子设置水平垂直居中的六种方法

关于使用绝对定位使元素垂直居中的问题

垂直居中相关知识总结

灵活高度垂直定心(IE8+)

绝对定位元素实现水平垂直居中