centering using js

by techsin

HTML

<div class="a">
    <div class="box">
        <div class="in"></div>
        <div class="in in1"></div>
    </div>
</div>

CSS

.a {
    padding: 10px;
    position: relative;
    box-shadow:0 0 0 1px #000;
}

.box {
    width: 111px;height: 111px;background-color: #e01;
    padding: 10px;
    position: relative;
}

.in {
    height: 10px;width: 30px;background-color: #0e0;
    position: absolute; top: 65.5px;
}
.in1 { left: 50px; top:50%; }

JavaScript

var b = $('.box');
console.log(
    b.offset().top,
    b.position().top,
    b.height(),
    b.css('padding-top'),
    parseInt(b.css('padding-bottom'))+parseInt(b.css('padding-top'))+b.height()
);