How do I center my search box to the middle of the page?

Here is my html

<div class="center">
<h1>  Brain Query</h1>
<img src="" alt="Smiley face" align="middle"><br>
<input type ="text" name="search" placeholder="Search.."/>

Here is my CSS

margin: 0 auto;

I noticed that margin :auto does not work. I am using Bootstrap.

I can center it using margin-top, margin-right etc etc. Why doesn’t margin auto work? How can I move everything to the middle of the page. Any suggestion would be great. Here is a link to my codepen

All I can do is center it at the top. What I want is to center it in the middle of page.

add the class text-center to your div element and for this one you can remove your css

To center all your content give the class “text-center” to your wrapping div.

As for your question: margin: 0 auto; needs an element with a fixed width, otherwise it won’t work.

1 Like

@zootechdrum Add text-center class to your element :stuck_out_tongue_winking_eye:

Do you want the brain in the vertical center of the page and then the search box to be below it or do you want to center both the brain and the search as a single unit centered vertically?

Thank you.I figured it out.