How to move Magento 2 Search bar to be centered

Question

Here is my current search bar:

And here is my expectation:

I still don't understand about how to make centered search bar like that ?

here is my html (from inspect element):

<header class="page-header"><div class="panel wrapper"><div class="panel header"><a class="action skip contentarea" href="#contentarea"><span>Skip to Content</span></a>
<ul class="header links">        <li class="greet welcome" data-bind="scope: 'customer'">
            <!-- ko if: customer().fullname  --><!-- /ko -->
            <!-- ko ifnot: customer().fullname  -->
            <span class="not-logged-in" data-bind="html:&quot;Default welcome msg!&quot;">Default welcome msg!</span>
                        <!-- /ko -->
        </li>

    <li class="authorization-link" data-label="or">
    <a href="http://senheng.local/customer/account/login/referer/aHR0cDovL3NlbmhlbmcubG9jYWwv/">
        Sign In    </a>
</li>
<li><a href="http://senheng.local/customer/account/create/">Create an Account</a></li></ul></div></div><div class="header content"><span data-action="toggle-nav" class="action nav-toggle"><span>Toggle Nav</span></span>
<a class="logo" href="http://senheng.local/" title="">
    <img src="http://senheng.local/static/version1557390609/frontend/Senheng/default/id_ID/images/senheng.png" title="" alt="" width="300" height="300">
</a>
<div class="block block-search">
    <div class="block block-title"><strong>Search</strong></div>
    <div class="block block-content">
        <form class="form minisearch" id="search_mini_form" action="http://senheng.local/catalogsearch/result/" method="get">
            <div class="field search">
                <label class="label" for="search" data-role="minisearch-label">
                    <span>Search</span>
                </label>
                <div class="control">
                    <input id="search" type="text" name="q" value="" placeholder="Search entire store here..." class="input-text" maxlength="128" role="combobox" aria-haspopup="false" aria-autocomplete="both" autocomplete="off">
                    <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
                    <div class="nested">
    <a class="action advanced" href="http://senheng.local/catalogsearch/advanced/" data-action="advanced-search">
        Advanced Search    </a>
</div>
                </div>
            </div>
            <div class="actions">
                <button type="submit" title="Search" class="action search" disabled="">
                    <span>Search</span>
                </button>
            </div>
        </form>
    </div>
</div>
<ul class="compare wrapper"><li class="item link compare" data-bind="scope: 'compareProducts'" data-role="compare-products-link">
    <a class="action compare no-display" title="Compare Products" data-bind="attr: {'href': compareProducts().listUrl}, css: {'no-display': !compareProducts().count}">
        Compare Products        <span class="counter qty" data-bind="text: compareProducts().countCaption"></span>
    </a>
</li>

</ul></div></header>

any help would be really appreciated.

Answer 1

In your Custom/Theme/Magento_Theme/layout/default.xml

<move element="top.search" destination="header.panel" before="minicart" />

Answer 2

You can move header search bar using below xml element,

app\design\frontend\YourVendor\YourCustomTheme\Magento_Theme\layout\default.xml

<move element="top.search" destination="where you want to move" />

As per your current search my suggestion is that you can manage it via CSS