자바스크립트입니다.          

            m_map = document.getElementById('map');
            m_map.style.width="100%";
            m_map.style.height="500px";
            m_map.style.overflow="hidden";
            m_map.style.margin = "0 auto";
            

            tileLayer = document.createElement("div");
            tileLayer.style.width = "100%";
            tileLayer.style.height = "100%";
            tileLayer.style.overflow ="hidden";
            tileLayer.style.zIndex = 1000;
            tileLayer.style.margin = "0 auto";

            m_map.appendChild(tileLayer);
            
            var tileGroup = document.createElement("div");
            tileGroup.style.overflow ="hidden";
            tileGroup.style.border = "solid";
            tileGroup.style.width = "100%";
            tileGroup.style.margin = "0 auto";
            tileGroup.style.height = pixel + "px";
            tileLayer.appendChild(tileGroup);



대략 이런식으로 짰는데 위에서 부터 채워지더군요.
css쪽은 잘 몰라서 그냥 스크립트에 다 때려박을 생각입니다. 
이걸 가운데서부터 채워지도록 하는 방법 없을까요?