盒子的垂直居中以及定位相关知识点

Posted 贺小鸣

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了盒子的垂直居中以及定位相关知识点相关的知识,希望对你有一定的参考价值。


1.让层垂直居中于浏览器窗口

div{
     position:absolute;
     top:50%;
     left:50%;
      margin:-150px 0 0 -200px;
      width:400px;
  height:300px;
  border:1px solid #008800;
}


2.绝对的定位,绝对的居中
position:absolute;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

以上是关于盒子的垂直居中以及定位相关知识点的主要内容,如果未能解决你的问题,请参考以下文章

将一个不定宽高的盒子设置水平垂直居中的六种方法

垂直居中相关知识总结

div盒子水平垂直居中的方法推荐

0060 translatemargin 实现绝对定位的盒子 水平居中垂直居中

内容居中(主要是垂直居中)

实现没有宽高的盒子水平垂直居中