Centralize div in Bootstrap

Question

Hello, I have a PHP page on which I am using Bootstrap to make a simple search screen.

<div class="container">
    <img src="/img/logoSuivi.png" class="img-responsive center-block">
    <div class="well col-md-3">
        <div class="breadcrumb">
            <form class="status">
                <fieldset>
                    <div class="form-group">
                        <label for="repair-status-search">Ordre de service:</label>
                        <input class="form-control" id="code" name="code" type="text" placeholder="Ordre de service" value="" onkeypress="return searchKeyPress(event);">
                    </div>
                </fieldset>
            </form>
            <button class="btn btn-success center-block" id="submit">Recherche</button>
            <img src="/img/Preloader.gif" class="loader img-responsive center-block" style="display: none;">
        </div>
    </div>
</div>

http://www.bootply.com/kCqrqsHQ8V

On the page above you can see how he is..

PS: I’m using version 3.3.6

I would like to center horizontally and vertically from the div where it contains the Well class, how is it possible to accomplish this?

I can’t just use the center-block as I used in the image.

Answer 1

A solution would be to use the power of property Transform. With a small combination to other properties it is possible to have a horizontal and vertical alignment. If you want images to have a similar alignment wrap all Ivs in a container and apply class formatting well to this container, as you can see below.

.container {
   position: relative;
}

.well {
   position: absolute;
   top: 50%;
   right: 50%;
   transform: translate(50%, 50%);
}

This solution results in alignment with the parent div. In other words, div.well will be in the center of the div.container. Finally the size and position of the div container will influence the centralization of the div daughter(well).