Change:
<!-- Do you have a question? Please ask it on --<!-- Use Help Report Issue to prefill these. --- VSCode Version: 1.21 OS Version: Mac 10.12.16 Steps to Reproduce: editor mode should be in vertical mode on centered layout with one tab, you should see it is centered split editor mode to horizontal mode centered layout will no longer work until you switch back to vertical mode <!-- Launch with to check. --Does this issue occur when all extensions are disabled?: Yes
(Experimental duplicate detection) Thanks for submitting this issue. Please also check if it is already covered by an existing one, like: <!-- score: 0.458 --- <!-- score: 0.451 --- <!-- score: 0.451 --<!-- potentialduplicatescomment --
Thanks for figuring this out. I spent a while trying to figure out what the problem was. Thank to you, I changed splitting to vertical mode and now centered layout works. I can affirm that this big is happening to me too. I'm on a mac as well.
I would expect centered mode to work if I have horizontal layout and only one editor. I tried removing the check to simply also enable it for horizontal layout but somehow the layout gets broken in that case. I plan to fix this in the following week but just to let you know that a PR is more than welcome :)
I just let you know that money is more than welcome :smile: Just kidding... I run on fun xD you shall have your PR :) it has the number . The problem was, that the available size was calculated by using which holds the height and not the width of the editor when in horizontal mode. You have to play around with it a little... it seemed to work but I did no deep testing or anything As bonus I fixed two typos (one of whom I made myself :smile:)
thanks a lot for your PR, I just merged it in I tried it out and it works nicely, also thanks for fixing typos. For money feel free to apply for our internshipts if you are a student or to our open positions :)
:smile: I'll finish university in 4 month... so... I might very well do that xD

Discussion:
private centeredEditorActive: boolean; private centeredEditorSashLeft: Sash; private centeredEditorSashRight: Sash; <del> private centeredEditorPreferedSize: number; </del> <ins> private centeredEditorPreferredSize: number; </ins> private centeredEditorLeftMarginRatio: number; private centeredEditorDragStartPosition: number; private centeredEditorDragStartSize: number;

@IWorkbenchEditorService private editorService: IWorkbenchEditorService, @IEditorGroupService private editorGroupService: IEditorGroupService, @IPartService private partService: IPartService, <del> @IStorageService private storageServise: IStorageService, </del> <ins> @IStorageService private storageService: IStorageService, </ins> @IContextKeyService private contextKeyService: IContextKeyService, @IExtensionService private extensionService: IExtensionService, @IInstantiationService private instantiationService: IInstantiationService,

this.centeredEditorLeftMarginRatio = 0.5; // Restore centered layout position and size <del> const centeredLayoutDataString = this.storageServise.get(EditorGroupsControl.CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY, StorageScope.GLOBAL); </del> <ins> const centeredLayoutDataString = this.storageService.get(EditorGroupsControl.CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY, StorageScope.GLOBAL); </ins> if (centeredLayoutDataString) { const centeredLayout = <CenteredEditorLayoutData>JSON.parse(centeredLayoutDataString); this.centeredEditorLeftMarginRatio = centeredLayout.leftMarginRatio; <del> this.centeredEditorPreferedSize = centeredLayout.size; </del> <ins> this.centeredEditorPreferredSize = centeredLayout.size; </ins> } } }

} private get centeredEditorAvailableSize(): number { <del> return this.silosSize[Position.ONE] - EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN * 2; </del> <ins> return this.dimension.width - EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN * 2; </ins> } private get centeredEditorSize(): number { <del> return Math.min(this.centeredEditorAvailableSize, this.centeredEditorPreferedSize); </del> <ins> return Math.min(this.centeredEditorAvailableSize, this.centeredEditorPreferredSize); </ins> } private get centeredEditorPosition(): number {

} if (size > 3 * this.minSize && size < this.centeredEditorAvailableSize) { <del> this.centeredEditorPreferedSize = size; </del> <ins> this.centeredEditorPreferredSize = size; </ins> position -= EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN; position = Math.min(position, this.centeredEditorAvailableSize - this.centeredEditorSize); position = Math.max(0, position);

leftMarginRatio: this.centeredEditorLeftMarginRatio, size: this.centeredEditorSize }; <del> this.storageServise.store(EditorGroupsControl.CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY, JSON.stringify(data), StorageScope.GLOBAL); </del> <ins> this.storageService.store(EditorGroupsControl.CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY, JSON.stringify(data), StorageScope.GLOBAL); </ins> } public getVerticalSashTop(sash: Sash): number {

// Layout centered Editor (only in vertical layout when one group is opened) const id = this.visibleEditors[Position.ONE] ? this.visibleEditors[Position.ONE].getId() : undefined; <del> const doCentering = this.layoutVertically && this.partService.isEditorLayoutCentered() && this.stacks.groups.length === 1 && id !== PREFERENCES_EDITOR_ID && id !== TEXT_DIFF_EDITOR_ID; </del> <ins> const doCentering = this.partService.isEditorLayoutCentered() && this.stacks.groups.length === 1 && id !== PREFERENCES_EDITOR_ID && id !== TEXT_DIFF_EDITOR_ID; </ins> if (doCentering && !this.centeredEditorActive) { this.centeredEditorSashLeft.show(); this.centeredEditorSashRight.show(); // no size set yet. Calculate a default value <del> if (!this.centeredEditorPreferedSize) { </del> <ins> if (!this.centeredEditorPreferredSize) { </ins> this.resetCenteredEditor(false); } } else if (!doCentering && this.centeredEditorActive) {

private resetCenteredEditor(layout: boolean = true) { this.centeredEditorLeftMarginRatio = 0.5; <del> this.centeredEditorPreferedSize = Math.floor(this.dimension.width * EditorGroupsControl.GOLDEN_RATIO); </del> <ins> this.centeredEditorPreferredSize = Math.floor(this.dimension.width * EditorGroupsControl.GOLDEN_RATIO); </ins> if (layout) { this.layoutContainers(); } <del> this.storageServise.remove(EditorGroupsControl.CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY, StorageScope.GLOBAL); </del> <ins> this.storageService.remove(EditorGroupsControl.CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY, StorageScope.GLOBAL); </ins> } public getInstantiationService(position: Position): IInstantiationService {