相对位置会覆盖背景色

Question

我有两个问题，为什么相对位置使h1标头为白色的部分甚至认为背景颜色为蓝色？

我如何居中放置此元素，以便无论屏幕大小如何始终居中？

<h1 id="maintitle">Find your new css!</h1>

html {
    background-color: rgb(171, 248, 235);
    font-family: sans-serif,Tahoma, Verdana, 'Times New Roman';
}

h1#maintitle {
    position: relative;
    margin: 0 0 0 0;
    width: 400px;
    padding: 10px;
    width: 50%;
    top: 50%;
}

https://jsfiddle.net/hbudyxkq/1/

Answer 1

body {
    background-color: rgb(171, 248, 235);
    font-family: sans-serif,Tahoma, Verdana, 'Times New Roman';
}

h1#maintitle {
 
    margin: 0 0 0 0;
    text-align: center;
    
}

<h1 id="maintitle">Find your new css!</h1>