关于 margin-top,padding-top,top 的取值
一个元素 margin-top,padding-top 设置为百分比时, 如果该元素的定位为 relative, 那么其取值就是其直接父元素的 width 乘以该百分比得到的值. 如果该元素的定位为 absolute, 则其取值是相对于最近的非 static 定位的父元素的 width 乘以该值.
之所以是相对于 width 而不是 height, 原因在于如果一个元素的上下外边距时父元素的 height 的百分数, 就可能导致一个无限循环, 父元素的 height 会增加, 以适应后代元素上下外边距的增加, 而相应的, 上下外边距因为父元素 height 的增加也会增加, 如果循环.
对于 top 的取值, 三个元素分别为 grandparent,parent,child, 如果 child 设置为 position: absolute, 则 top 的值等于百分比乘以最近的非 static 定位 (absolute 或是 fixed) 的 height, 如果一直往上找不到非 static 的父元素, 则为百分比乘以屏幕高度.
为一个元素设置 margin: auto 相当于设置为 margin: 0 auto, 此时元素相对于父元素水平居中, 但是垂直方向无法居中, 因为此时的 margin-top 和 margin-bottom 都为 0
但是如果给子元素设置了 position: absolute; top: 0; left: 0; right: 0; bottom: 0; 此时将给浏览器重新分配一个边界框, 此时该块 block 将填充其父元素的所有可用空间, 父元素一般为 body 或者声明为 position:relative; 的容器, 这时候如果再设置 margin 为 auto 就会给 margin-top 和 margin-bottom 设置相同的值使其居中.
垂直居中
flex 布局方式
- .parent {
- display: flex;
- align-items: center;
- }
- .child {
- height: 100px;
- }
利用 top 和 transform 来实现(使用 top 是因为 top 的取值是相对于父元素的 height 的)
- .parent {
- height: 500px;
- position: relative; // 如果不设置 relative, 那么 top 的取值就不相对于该父元素
- }
- .child {
- position: absolute;
- height: 100px;
- top: 50%;
- tranform: translateY(-50%);
- }
黑科技
- .parent {
- height: 500px;
- position: relative; // 如果不设置 relative 那么就会相对于最近的非 static 定位父元素居中
- }
- .child {
- position: absolute;
- height: 100px;
- margin: auto; // 必须设置
- top: 0;
- bottom: 0; // 这两项设置垂直居中
- left: 0;
- right: 0; // 这两项实现水平居中
- }
如果要使元素相对于屏幕始终垂直居中
- .fixed-center {
- height: 600px;
- width: 800px;
- background: pink;
- position: fixed; // 和上面和科技的唯一区别在于定位方式, 这样就是相对于浏览器窗口定位了
- overflow: auto;
- margin: auto;
- top: 0; left: 0; bottom: 0; right: 0;
- }
注意 1: 如果设置了 positiond 为 fixed 但是没有设置具体的 top,bottom,left,right 的值时, 其实这时候会自动设置 top 为父元素的 margin-top+border-top+padding-top 的值, 相应的 left 的值设为父元素的 margin-left+border-left+padding-left 的值, 此处所指的父元素就是直接父元素, 无论该父元素的定位方式如何.
注意 2: 一般情况下 fixed 定位的元素是相对于浏览器窗口定位的, 但是当该元素的父元素设置了 transform 值时, 这时候就不是对于浏览器窗口定位了, 而是相对于父元素的 border 内侧左上角定位了. 还有一种情况: 当不是直接父元素设置 transform 而是更上级的父元素设置 transform 时, 此时 fixed 定位的元素是相对于直接父元素的 border 外侧左上角定位的
利用 table-cell 来实现垂直居中
- .parent {
- height: 200px;
- width: 200px;
- display: table-cell;
- vertical-align: middle;
- }
- .child {
- height: 100px;
- width: 100px;
- }
关于 relative 和 absolute 定位
如果一个元素的 position 设置为了 relative, 然后再设置 top 等值的话, 就是相对于原有的位置进行平移, 不会影响到其他同级元素的定位;
如果一个元素 position 设为了 absolute, 再设置了 top 等值, 那就是相对于最近非 static 的定位 (可以使 fixed 定位和 absolute 定位) 的父级元素的 border 内侧左上角定位, 会影响到其他的同级元素的定位, 因为他脱离了文档流
来源: http://www.jianshu.com/p/df2cbeea5759