Trying to fix centerY:0 not centering the view.

monster_builder.css

.sc-view {
  position: relative;
  overflow: visible;
}

monster_builder.js

// ==========================================================================
// Project:   MonsterBuilder
// Copyright: @2011 My Company, Inc.
// ==========================================================================
/*globals MonsterBuilder */

MonsterBuilder = SC.Application.create({
    store: SC.Store.create().from(SC.Record.fixtures)
});

MonsterBuilder.statechart = SC.Statechart.create({

  autoInitStatechart: NO,

  rootState: SC.State.design({
    initialSubstate: 'ready',

    ready: SC.State.plugin('MonsterBuilder.ReadyState')
  })

});

MonsterBuilder.pane = SC.Pane.create({
	layout: { centerX: 0, centerY: 0, height: 400, width: 800 },
	childViews: ['sidebar', 'contentView'],
	classNames: ['app'],
	defaultResponder: 'MonsterBuilder.statechart',
	// View in a view, since we can then determine the layout in this file.
	sidebar: SC.View.design({
		layout: { width: 200 },
		childViews: ['sidebar'],
		classNames: ['sidebar'],
		
		sidebar: SC.TemplateView.design({
			templateName: 'sidebar_view'
		})
	}),
	
	contentView: SC.ContainerView.design({
		layout: {left: 201},
	    autoResizeStyle: SC.RESIZE_AUTOMATIC,
		nowShowingBinding: 'MonsterBuilder.displayController.nowShowing'
	})
});

MonsterBuilder.monsterView = SC.TemplateView.create({
	classNames: ['monster'],
	contentBinding: 'MonsterBuilder.monsterController',
	templateName: 'monster'
});

SC.ready(function() {
    console.log('SC.ready: starting initial statechart.');
	MonsterBuilder.statechart.initStatechart();
});

ready.js

/*globals MonsterBuilder */

MonsterBuilder.ReadyState = SC.State.extend({
    // Basic state handling
    initialSubstate: 'loading',
    
    enterState: function() {
        console.log('Entering MonsterBuilder.ReadyState.');
        MonsterBuilder.pane.append();
    },

    exitState: function() {
        console.log('exiting MonsterBuilder.ReadyState.');
        MonsterBuilder.pane.remove();
    },

    // Substates
    
    loading: SC.State.design({
        // Status of the loading, for when the fetching is done asynchronously.
        _loaded: 0, // This keeps track of the fetches that have been loaded already.
        _total: 0, // This keeps track of how many fetches we have. Not sure why he initializes it to 0 though.
        
        enterState: function() {
            console.log('Entering MonsterBuilder.ReadyState.loading.');
            // Set the status variables properly.
            this._loaded = 0;
            this._total = 1;    // We're doing only one fetch at the moment.
            
            // Call the fetch methods.
            this._loadMonsters();
        },
        
        exitState: function() {
            console.log('Exiting MonsterBuilder.ReadyState.loading.');
            // Nothing in particular has to be done here.
        },
        
        _loadMonsters: function() {
            console.log('Loading Monsters.');
            var query = SC.Query.local(MonsterBuilder.Monster);
            var data = MonsterBuilder.store.find(query);
        
            data.addObserver('status', this, function observer() {
                if(data.get('status') === SC.Record.READY_CLEAN) {
                    data.removeObserver('status', this, observer);
                    MonsterBuilder.monstersController.set('content', data);
                    this.get('statechart').invokeStateMethod('dataLoaded');
                }
                // TODO: should check for error messages as well.
            });
        
            // In case our data was already loaded (ie. synchronous).
            data.notifyPropertyChange('status');
        },
        
        dataLoaded: function() {
            console.log('Data has been loaded.');
            // Process check. Are we done with fetching?
            this._loaded++;
            if(this._loaded === this._total) {
                this.get('statechart').sendAction('gotoNone');
            }
        }        
    }),
    
    none: SC.State.design({
        // Basic state handling
        initialSubstate: 'none', 
        
        enterState: function() {
            console.log("Application ready");
        },

        exitState: function() {
            console.log('Exiting application.');
            // Nothing needs to be done here at the moment.
        },
        
        // Substates
        none: SC.State,
        
        showingMonster: SC.State.design({
            // Some variables
            _store : null,
            
            // Basic state handling
            enterState: function(context) {
                console.log('Entering MonsterBuilder.ReadyState.none.');
                // Use context to determine which monster we're showing.
                var monster = context ? context.group : null;
                var store = MonsterBuilder.store.chain();
                
                if(monster) {
                    monster = store.find(MonsterBuilder.Monster, monster.get('guid'));
                    MonsterBuilder.monsterController.set('content', monster);
                }
                this._store = store;
                MonsterBuilder.displayController.set('nowShowing', 'MonsterBuilder.monsterView');
            },
            
            exitState: function() {
                console.log('Exiting MonsterBuilder.ReadyState.none.');
                this._store.discardChanges().destroy();
                this._store = null;
            },
            
            // Actions
            
            cancel: function() {
                console.log('Canceling changes.');
                this._store.discardChanges();
            },

            save: function() {
                console.log('Saving changes.');
                this._store.commitChanges(true);
            }
        }),
        
        // Actions
        showMonster: function() {
            console.log('Showing monster.');
            this.gotoState('ready.none.showingMonster');
            return YES;
        }
    }),

    // Actions
    gotoNone: function() {
        console.log('Going to none.');
        this.gotoState('ready.none');
        return YES;
    }
});