div.width（）返回错误的值jquery

Question

我正在尝试编写一个jQuery脚本，将div块放在屏幕的中心。问题是我传递给这个函数的div块有点样式或者div.width(), div.outerWidth(), div.outerWidth(true), div.innerWidth()都返回1839px的相同错误值，即$(window).outerWidth()值。我无法弄清楚我犯了什么错误？请帮助！

这是一段代码：

function absoluteCenter(div) {

var winWidth = $(window).outerWidth(true);
var winHeight = $(window).outerHeight(true);
var divWidth = $("#"+div).outerWidth(true);
var divHeight = $("#"+div).outerHeight(true);

alert(divWidth);

$("#"+div).css({'position':'absolute', 'left':(winWidth/2 - divWidth/2), 'top':(winHeight/2 - divHeight/2)});

}

/* MAIN JS FILE TO INCLUDE ALL WRITTEN FUNCTIONS */

$(document).ready(function(){

  diagonalize('about_container', 1, 'about_block');
  diagonalize('products_container', -1);

  absoluteCenter('about_block');

  scrollOnClick('to_about', 'about_container');
  crollOnClick('down_arrow', 'about_container');
  scrollOnClick('to_products', 'products_container'); 
});

HTML：

 <div id="second_screen">
            <div id="about_container">
                <div id="about_block">
                    TROUBLE
                </div>
            </div>
 </div>

主要SASS文件：

/* MAIN STYLE FILE OF LANDING PAGE */
/* STYLES FOR LANDING SCREENS WRAPPERS ARE HERE */

@import libs/hover/hover
@import colors
@import mixings
@import fonts
@import texts
@import menu
@import extends
@import landing_screen
@import about_screen
@import products_screen

body
  margin: 0
  padding: 0
  background-image: url("../res/landing-background.png")
  +background_cover

// landing screens wrappers
#first_screen, #second_screen, #third_screen
  @extend .screen_wrapper

此外，我正在使用对角线化脚本偏斜div块（参见屏幕截图以供参考）：

function diagonalize(div, direction, compensation_div) {

var degree = Math.atan(0.13*$(window).width()/$(window).height())* (180/Math.PI);

if(direction === -1) degree = -degree;

$("#"+div).css({'-webkit-transform': 'skew('+degree+'deg)', '-moz-transform': 'skew('+degree+'deg)', '-o-transform':'skew('+degree+'deg)'});

$("#"+compensation_div).css({'-webkit-transform': 'skew(-'+degree+'deg)', '-moz-transform': 'skew(-'+degree+'deg)', '-o-transform':'skew(-'+degree+'deg)'});
}

Answer 1

如果您知道或设置width的{​​{1}}，这将有效（也在IE8中）。

div

div {
  background-color: pink;
  width: 200px;
  height: 100px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}