diff --git a/src/CenterContent/README.mdx b/src/CenterContent/README.mdx
index 0fff2537..f035769c 100644
--- a/src/CenterContent/README.mdx
+++ b/src/CenterContent/README.mdx
@@ -23,7 +23,7 @@ Instead of defining a height, you can also use the `fillParent` prop which will
 
 <Playground>
 	<CenterContent height={350}>
-		Hello <PodcastIcon />
+		<PodcastIcon vAlign /> Hello
 	</CenterContent>
 
     <div style={{
diff --git a/src/CenterContent/index.js b/src/CenterContent/index.js
index 238ef841..1eeb5c32 100644
--- a/src/CenterContent/index.js
+++ b/src/CenterContent/index.js
@@ -8,6 +8,8 @@ import {paddingProps} from '../styleProps';
 
 const Wrapper = styled.div`
 	display: flex;
+	flex: 1;
+
 	${p =>
 		p.height &&
 		css`
@@ -34,7 +36,8 @@ const Wrapper = styled.div`
 `;
 
 const Content = styled.div`
-	max-width: ${p => (p.width ? pxToRem(p.width) : '100%')};
+	width: ${p => (p.width ? pxToRem(p.width) : 'auto')};
+	max-width: 100%;
 
 	/* Needed for IE11 to contain large items: https://stackoverflow.com/a/42494339 */
 	flex-shrink: 0;