Bring content closer to center vertical when space permitting

Ref #111753

src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css

@@ -16,6 +16,16 @@
 	left: 0;
 }
 
+.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories {
+	height: calc(100% - 50px);
+	display: flex;
+	flex-direction: column;
+}
+
+.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .gap {
+	flex: 150px 0 1
+}
+
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .header {
 	margin-top: 32px;
 	display: flex;

src/vs/workbench/contrib/welcome/gettingStarted/browser/vs_code_editor_getting_started.ts

@@ -10,11 +10,13 @@ export default () => `
 <div class="gettingStartedContainer">
 	<div class="gettingStarted" role="document">
 		<div id="gettingStartedSlideCategory" class="gettingStartedSlide categories">
+			<div class="gap"></div>
 			<div class="header">
 				<h1 id="product-name" class="caption">${escape(localize('gettingStarted.vscode', "Visual Studio Code"))}</h1>
 				<p class="subtitle description">${escape(localize({ key: 'gettingStarted.editingRedefined', comment: ['Shown as subtitle on the Welcome page.'] }, "Code editing. Redefined"))}</p>
 			</div>
 			<div id="getting-started-categories-container"></div>
+			<div class="gap"></div>
 		</div>
 		<div id="gettingStartedSlideDetails" class="gettingStartedSlide detail">
 			<a class="prev-button" x-dispatch="scrollPrev"><span