Center output (plots) in the notebook

What I do is the following. This might help, but it also creates a beautifully rendered notebook.

Have a look at this online book about Bayesian Statistics. This is really nice.

They load a custom CSS at the end of the notebook using this code:

from IPython.core.display import HTML
def css_styling():
    styles = open("custom.css", "r").read() #or edit path to custom.css
    return HTML(styles)
css_styling()

You can download this custom CSS from the books github repo HERE: Drop it in the notebook folder and call the code above

Also note their nice matplotlibrc file. You can change the look and feel of the plots calling this code. Call this early in the notebook and all matplotlib plots will look pretty cool.

    import json
    s = json.load( open("bmh_matplotlibrc.json") )  #edit path to json file
    matplotlib.rcParams.update(s)

Download the JSON file HERE from GITHUB


In short you have two options. Both add CSS styling to the notebook to achieve the effect:

  1. Global Jupyter CSS (affects all notebooks) Edit or create ~/.jupyter/custom/custom.css and add:

    .output_png {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    
  2. Modify the style of the current notebook by executing a code cell with:

    from IPython.core.display import HTML
    HTML("""
    <style>
    .output_png {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    </style>
    """)
    

Note that in the first case there is no <style></style>.

I prefer the second option, specially if I'm going to share the notebook (since its self-contained).