html基础学习——div块居中（登录界面）

今天进入HTML的学习，虽然之前也学过，但也只是皮毛，（就是表单的创建）今天之后就开始正式的学习前端HTML的学习。

今天遇见的问题是如何对div进行网页居中。

首先看下我最后做成的样子吧。（有点丑，理解下哈。）

这个登录界面div可以随着窗口的随意变换而一直处于网页的中央位置。

css源码：

div{
    background: darkgrey;/*背景色*/
    width: 400px;
    height: 200px;
    border: 1px solid white;/*边框色*/
    text-align: center;/*div内容居中*/
    /*margin:300px auto;*/

    /*动态div居中*/
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -200px;
    /**/
    border-style: inset;
}

left代表左边距，top代表顶部间距，margin-top（上外边距）:-100px指的是顶部间距为height的一半，同理，margin-left（左外边距）：-200px指的是左边距为width的一半。

解释：首先利用posation:absolute进行定位，对div块的父级，也就是body标签进行绝对定位，这样随意改变窗口大小就可以实现动态居中，

left:50%;

top: 50%;

这两句是因为只要把上边距的50%固定和左边距的50%固定，这样不管改变body的窗口的大小为多少都可以实现上下左右都是平均分配的，也就是使div块达到了居中的效果。

以上是我觉得目前对div进行居中的最好办法，也是刚接触，以后在发现更好的也会分享，当然也欢迎大家来讨论更好的想法。

谢谢大家支持。