如何使用引导程序类将div居中放置在其他div中？

Question

I'm working on a responsive web page using Bootstrap and SASS.

How can I center the maintext div and Logo , when the screen has smaller size? I've tried a variety of options, such as:

@media (max-width: 750px) {

    #maintext {
     margin-left: 0;
     margin-right: 0;

    }
}

I also tried to place maintext div inside another div centerhelper , and to do so:

@media (max-width: 750px) {
    .centerhelper {
        left: 50%;
        border: solid blue 2px;
    }

    #maintext {
     left: -50%;

    }
 }

But the height of the centerhelper div was equal to zero, I tried different "display" CSS for the centerhelper div and maintext div , but did not succeed.

Here is my HTML code:

 <!-- NAVIGATION TOP -->
        <nav class="navbar my-navbar navbar-inverse">
          <div class="container">
            <div class="navbar-header">

     <!-- LOGO -->
              <a href="#" class="my-logo pull-left"><img src="img/Logo.png"></a> 
      <!-- LOGO -->          
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

            </div>
            <div id="navbar" class="collapse navbar-collapse pull-right">
              <ul class="nav navbar-nav">
                <li><a href="#"><button class="navbutton active">Home</button></a></li>
                <li><a href="#"><button class="navbutton">About</button></a></li>
                <li><a href="#"><button class="navbutton">Services</button></a></li>
                  <li><a href="#"><button class="navbutton">Portfolio</button></a></li>
                <li><a href="#"><button class="navbutton">Blog</button></a></li>
                <li><a href="#"><button class="navbutton lastbutton">Contact</button></a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>

        <!-- NAVIGATION TOP END -->
        <!-- SHOWCASE -->  
          <section class="showcase">
            <div class="container showcase-content">

<!-- MAINTEXT DIV -->
               <div class="centerhelp"> <div id="maintext" ></div></div>
<!-- MAINTEXT DIV -->                
             </div>
          </section>
        <!-- SHOWCASE END -->

And CSS:

.showcase {

  background-image: url(...);
  height: 380px;
  width: 100%;

#maintext {
    padding: 0px;
    display: inline-block;
    float: left;

  margin-top: 91px;
  width: 430px;

    h1 {
        padding: 0;
        margin: 0;
    }
    p {
        padding: 0;
        margin: 0;
        }
    }

Answer 1

Here you have a working jsfiddle of your example

@media (max-width: 1000px) {
    .centerhelper {
        left: 50%;
        border: solid blue 2px;
     }
     div#maintext {
       text-align: center;
     }
     .navbar-header{
       text-align: center;
     }
    .pull-left{
      float:none!important;
    }
}

Answer 2

Why don't you try this, This would be in absolute center in all screen sizes. :)

 .popup{ position:fixed; left:50%; } .popup .wrapper{ position:relative; left:-50%; /*popup-styles*/ background-color:#fff; padding:10px; border:solid 2px #444; border-radius:10px; } html{background-color:#aaa;} 

 <div class="popup"> <div class="wrapper"> <img src="http://farm4.staticflickr.com/3721/8826906676_501192b1c4.jpg"> </div> </div>