How to format search bar so its on top and center of a image

[Link_1]

Please take a look at the attached image first. I would like to recreate this.

I am using VB and bootstrap.

Code:

        <div id="body_wrapper">
                <div id="theCarousel" class="carousel slide" data-ride="carousel">   
                    <!-- Text -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="slide1"></div>
                            <div class="carousel-caption">
                                <h1>my picture 1</h1>
                            </div>
                        </div>
                    </div>

                    <div id="search_wrapper">
                        <asp:TextBox ID="searchTB" runat="server" multiline="true"></asp:TextBox>
                        <asp:ImageButton ID="searchIB" runat="server" ImageUrl="~/Images/search.png" />
                    </div>
                </div>
        </div>

problem:
I am not sure how can I write bootstrap code to move the search_wrapper above. I also want to make sure it auto-ajust
when window is resize and it work for all browsers.

any idea will be help full.

What I have tried:
i try using margin:auto but doesn't work. padding also doesn't work.