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+)
绝对定位元素实现水平垂直居中