Center align web part

Question

I was wondering if there was a way to center align a Search Box web part in SharePoint 2013 using CSS.

Google searches show me similar unanswered questions, or questions with answers that do not work (e.g. How to center align a web part).

Answer 1

Much depends on your webpart zone layout, but I'll think you could do something like this:

<style type="text/css">
div#SearchBox {
    margin: auto;
    width: 50%;
    float: none;
}
</style>

However, if the small searchbox that is available on all the sites is present, the above CSS will mess it up as they use the same ID. So I would suggest to hide it from the same site where you have the Search box webpart.

#searchInputBox {
    display: none;
}

Another way is to apply CSS directly to the specific webpart ID. Use F12 to find the ID for the webpart and apply the CSS to it instead.

div#WebPartWPQ2 {
    width: 50%;
    margin: auto;
}