css设置的垂直水平居中为什么没有达到效果？？

<div >

gh我是gh"www.zzjs.net站长特效网，fv

</div>

    <style>
    div{
        border:red 2px dotted;
        height:400px;
        width:800px;
        line-height:400px;
        text-align: center;
    
        }
    #screen{
        width: 300px;
        height: 100px;    
        display: inline-block;
        vertical-align:middle;
    border:red dotted 2px;
    
        }
</style>

问题1是p元素应该相对div垂直水平居中，但是只有水平居中，没有垂直居中？？
问题2是：p里面的文字为什么脱离了p元素？
问题3：如果p元素高宽都超过了父元素，如果不设置其top,left值得前提下，如何能保证其仍然相对父元素垂直水平居中？？求大神解惑

---

用line-height只能达到文本内容的垂直居中，p元素里面的内容继承了div的line-height，所以出去了
改成下面的p就能相对于div居中了
div{

    border:red 2px dotted;
    height:400px;
    width:800px;        
    text-align: center;

    }

div:before{

display:inline-block;
content:"";
height:100%;
vertical-align:middle;

}

---

https://jsfiddle.net/62ohbysu/