Align footer section of modal to center

Question

I want to display the buttons in the footer section to the center and I'm using the modal container. I have tried multiple CSS but none of them are not working, could you please suggest me the correct approach

My Div:

<footer class="slds-modal__footer " >
     <lightning:button type="Cancel" label="Cancel" variant="neutral" onclick="{!c.cancelAction}"/>
     <lightning:button type="Submit" label="Save" variant="brand" />
</footer>  

Answer 1

You can use SLDS grid system.
With the slds-grid class you define a flexbox then with slds-grid_align-center class you set the alignment of its content.
So you can define a div with these two classes and putting the buttons inside

<footer class="slds-modal__footer">
    <div class="slds-grid slds-grid_align-center">
         <lightning:button type="Cancel" label="Cancel" variant="neutral" onclick="{!c.cancelAction}" />
         <lightning:button type="Submit" label="Save" variant="brand" class="slds-var-m-left_x-small" />
    </div>
</footer> 
``