3

I added a landing page to my webapp, so when it is loading data from the server, the landing page is shown with a loading image and a description.

  <div class="map_view">
    <!-- shown only when data is not available -->
    <div class="loading_screen">
      <img src="/img/loading_boys.gif"/>
      <h2>Connecting to the the network ...</h2>
    </div>;
  </div>

The div loading screen is on top of div map_view. I want to center the image and the <h2> on its parent div. I can use text-align: center; to center it horizontally. But I cannot find a way to center it vertically. I want to make it compatible to different screen sizes as well, so no matter in what devices, the loading div is always in the center of its parent div.

I tried to use display: table; in map_view and display: table-cell; vertical-align: middle; on loading_screen, but then the google map disappears, with just a background color.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
J Freebird
  • 3,664
  • 7
  • 46
  • 81

2 Answers2

6

Try this:

.loading_screen {
    display: flex;            /* establish flex container */
    flex-direction: column;   /* align children vertically (column format) */
    justify-content: center;  /* center children vertically */
    align-items: center;      /* center column horizontally */
}

Benefits of flexbox:

  1. minimal code; very efficient
  2. centering, both vertically and horizontally, is simple and easy
  3. equal height columns are simple and easy
  4. multiple options for aligning flex elements
  5. it's responsive
  6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Thanks for your suggestion. It did center the img and the

    . But the

    content was pushed to the right of the image, I want it to be behind the image. It also caused the image to be stretched horizontally. Deleting the

    solves all of the above. I wonder how to fix it in another way?

     – J Freebird Jan 04 '16 at 01:21
  • Add this line of code: `flex-direction: column`. See revised code block in my answer. – Michael Benjamin Jan 04 '16 at 01:25
  • Worked like magic... I'll study the code to see why it works. Thanks a lot for your help! – J Freebird Jan 04 '16 at 01:27
  • Glad I could help. Here's a good resource if you're interested: [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) – Michael Benjamin Jan 04 '16 at 01:29
-1

Use this trick to centre stuff perfectly in websites. Just have to emphasise that this will only work if the outer container has a defined height.

Make sure the .loading_screen (container) has a fixed height in pixels and the apply this css to the img and h2 (contents): 

.loading_screen {                                      
    height: 500px; /*for example*/                     /* Container */
}    

h2 {                                                   
    position: relative;
    top: 50%;                                          /* Content */
    transform: translateY(-50%);
}

Adjust the translate to move elements up or down in container. -50% centres it.

Use -moz- -o- and -webkit- prefixes on the 'transform: ' for browser compatibility:

transform: translateY();
-webkit-transform: translateY();
-o-transform: translateY();
-moz-transform: translateY();

You could use: 

.loading_screen {
    display: flex;            
    justify-content: center;  
    align-items: center;      
    align-content: center;   
}

But it has very awkward and undesirable effects when dealing with multiple stacks of elements.

Jonathan P
  • 418
  • 5
  • 14