diff --git a/common/changes/office-ui-fabric-react/contextualMenuAlignSplitButton_2018-03-27-18-13.json b/common/changes/office-ui-fabric-react/contextualMenuAlignSplitButton_2018-03-27-18-13.json
new file mode 100644
index 00000000000000..eeefbd5c9d00b9
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/contextualMenuAlignSplitButton_2018-03-27-18-13.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ContextualMenu / Split Button: Fixed styling problems For centered button content.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "chiechan@microsoft.com"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.types.ts b/packages/office-ui-fabric-react/src/components/Button/Button.types.ts
index ecabfd26030d13..bf875046469f55 100644
--- a/packages/office-ui-fabric-react/src/components/Button/Button.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/Button.types.ts
@@ -504,4 +504,9 @@ export interface IButtonStyles {
    * Style override for the SplitButton FlexContainer.
    */
   splitButtonFlexContainer?: IStyle;
+
+  /**
+   * Style override for focus on the the SplitButton Container
+   */
+  splitButtonFlexContainerFocus?: IStyle;
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts
index 0bd0d9a741f381..0db28c87f8c762 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts
@@ -22,6 +22,7 @@ export interface IMenuItemClassNames {
   subMenuIcon: string;
   label: string;
   splitContainer: string;
+  splitContainerFocus: string;
   splitPrimary: string;
   splitMenu: string;
   linkContentMenu: string;
@@ -200,11 +201,14 @@ export const getItemClassNames = memoizeFunction((
     ],
     splitContainer: [
       styles.splitButtonFlexContainer,
+    ],
+    splitContainerFocus: [
+      styles.splitButtonFlexContainerFocus,
       !disabled && !checked && [{
         selectors: {
           '.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus:hover': styles.rootFocused,
         }
       }]
-    ],
+    ]
   });
 });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts
index 25db1e745942f7..d89d386c5c723c 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts
@@ -168,15 +168,17 @@ export const getMenuItemStyles = memoizeFunction((
       flexShrink: '0',
       fontSize: FontSizes.mini
     },
-    splitButtonFlexContainer: [
-      getFocusStyle(theme), {
-        display: 'flex',
-        height: ContextualMenuItemHeight,
-        flexWrap: 'nowrap',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }],
-    splitButtonSeparator: {}
+    splitButtonFlexContainer: {
+      display: 'flex',
+      height: ContextualMenuItemHeight,
+      flexWrap: 'nowrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    splitButtonSeparator: {},
+    splitButtonFlexContainerFocus: [
+      getFocusStyle(theme)
+    ]
   };
 
   return concatStyleSets(menuItemStyles);
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 4f531f196a895e..ae06fb8e1ca6bf 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -597,7 +597,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         }
         role={ 'button' }
         aria-labelledby={ item.ariaLabel }
-        className={ classNames.splitContainer }
+        className={ classNames.splitContainerFocus }
         aria-disabled={ this._isItemDisabled(item) }
         aria-haspopup={ true }
         aria-describedby={ item.ariaDescription }
@@ -611,7 +611,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       >
         <span
           aria-hidden={ true }
-          style={ { display: 'flex', height: '100%' } }
+          className={ classNames.splitContainer }
         >
           { this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks!, hasIcons!) }
           { this._renderSplitDivider(item) }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx
index 76545c463f2c1f..971a113e3921fa 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx
@@ -135,6 +135,7 @@ function getMenuItemClassNames(): IMenuItemClassNames {
     subMenuIcon: 'subMenuIcon',
     label: 'label',
     splitContainer: 'splitContainer',
+    splitContainerFocus: 'splitContainerFocus',
     splitPrimary: 'splitPrimary',
     splitMenu: 'splitMenu',
     linkContentMenu: 'linkContentMenu',
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
index 11c4226f3d2f8f..65c457d0571f82 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
@@ -16,6 +16,7 @@ ShallowWrapper {
         "linkContentMenu": "linkContentMenu",
         "root": "root",
         "splitContainer": "splitContainer",
+        "splitContainerFocus": "splitContainerFocus",
         "splitMenu": "splitMenu",
         "splitPrimary": "splitPrimary",
         "subMenuIcon": "subMenuIcon",
@@ -141,6 +142,7 @@ ShallowWrapper {
         "linkContentMenu": "linkContentMenu",
         "root": "root",
         "splitContainer": "splitContainer",
+        "splitContainerFocus": "splitContainerFocus",
         "splitMenu": "splitMenu",
         "splitPrimary": "splitPrimary",
         "subMenuIcon": "subMenuIcon",
@@ -287,6 +289,7 @@ ShallowWrapper {
         "linkContentMenu": "linkContentMenu",
         "root": "root",
         "splitContainer": "splitContainer",
+        "splitContainerFocus": "splitContainerFocus",
         "splitMenu": "splitMenu",
         "splitPrimary": "splitPrimary",
         "subMenuIcon": "subMenuIcon",
@@ -404,6 +407,7 @@ ShallowWrapper {
         "linkContentMenu": "linkContentMenu",
         "root": "root",
         "splitContainer": "splitContainer",
+        "splitContainerFocus": "splitContainerFocus",
         "splitMenu": "splitMenu",
         "splitPrimary": "splitPrimary",
         "subMenuIcon": "subMenuIcon",
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx
index 1a3171c052837e..957b11706bcddc 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx
@@ -80,6 +80,42 @@ export class ContextualMenuSubmenuExample extends React.Component<any, IContextu
                   ],
                 },
                 name: 'Share'
+              },
+              {
+                key: 'shareSplit',
+                onClick: () => alert('Split buttons!'),
+                split: true,
+                subMenuProps: {
+                  items: [
+                    {
+                      key: 'sharetotwittersplit',
+                      name: 'Share to Twitter',
+                    },
+                    {
+                      key: 'sharetofacebooksplit',
+                      name: 'Share to Facebook',
+                    },
+                    {
+                      key: 'sharetoemailsplit',
+                      name: 'Share to Email',
+                      subMenuProps: {
+                        items: [
+                          {
+                            key: 'sharetooutlooksplit_1',
+                            name: 'Share to Outlook',
+                            title: 'Share to Outlook',
+                          },
+                          {
+                            key: 'sharetogmailsplit_1',
+                            name: 'Share to Gmail',
+                            title: 'Share to Gmail',
+                          }
+                        ],
+                      },
+                    },
+                  ],
+                },
+                name: 'Share w/ Split'
               }
             ]
           }