让一个div居于屏幕正中间,让其中的文字也相对于div居于正中间

1.面试的时候  会碰见这样的问题 如何让一个宽高200px的div居于屏幕正中间  上下都居中的意思

看到这样的题目 很开心  直接就开些写了 

<style>
       div:{

            width:200px;

            height:200px;

            border:1px solid #f00;

             position:absolute;

             top:50%;

             left:50%;

             margin-top:-100px;

            margin-left:-100px;

    }


</style>

这样就完成了 上面的问题

2.但面试官 如果你很快就完成了 面试 官可能就会加大难度  如果css玩的好的话 上面的问题 很简单

接下来面试官接着说道 ;  如果div的宽高不知道 怎么做

如果有css3知识的同学 可能就会一笑而过了 这个问题同样很简单

在不知道宽高的情况下 让他 相对于自身  向左向上 偏移50%的 宽度 和高度就可以

把上面的 margin-left和margin-top  换成css3中的2d转换中有一个偏移的函数

transform:translate(-50%,-50%)   由于是向左 向上 所以是负数   不知道2d转换的童鞋可以去往w3c官网学习一下

3，完成了 以上i挨个问题之后  你可以先高兴一会 因为接下来 面试官的话 可能让你高兴不起来了

 如果在不知道宽高的情况下 让div居于屏幕正中间 你完成了 那么 如果div里面 有一段文字 也让这段文字相对于div居于它的正中间 怎么做

<div><p>hello world</p></div>

可能听完之后 就很难受了    但别急我们慢慢剖析

单单让文字水平居中  这个问多童鞋都会  是 text-align:center;

但是垂直居中呢   以往的话 童鞋们可能会用到 使用行高 也解决  line-hieght  但此时没有高度 你怎么使用

大家都知道 在表格中间每一列 有一个vertical-align:middle;就可以让我们的文字垂直居中于列中间了

这里要用到的就是这个东西   只是可能在工作中用的很少 很多人就忽略他了 

在div上加一个 display:table;  使其变成一个表格形式

同时设置里面的文字 水平居中  text-align:center;

还没有完  接下来 设置 “表格里面的元素”

p{

   display:table-cell;

    vertical-align:middle;

}

display:table;display:table-cell;  其实还有很多应用的 这里就不再一一赘述了 。有兴趣的童鞋去学习下

这样就完成了 不知道宽高 的div 居于屏幕正中间 里面有段文字也让他相对于div居于正中间