Css align text Vertically Center — October 31, 2017

Css align text Vertically Center

To align text vertically centered we need to add some table properties to div. First we need a outer div which must have a fixed height. Then a middle div and in that middle div we can add any text. We just need these properties.

.outer { display: table;position: static;height: 222px; }
.middle {display: table-cell;vertical-align: middle;width: 100%;position: static;}

For better explanation please follow this link. There is one more example with css FLEX property.

CSS add overlay with content and spinner — September 29, 2017

CSS add overlay with content and spinner

            background-color: rgba(255, 255, 255, 0.8);
            position: fixed;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            background-position: center center;
            background-repeat: no-repeat;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-size: 91px;

Just add anything in div with class ‘overlay’, like text , image and it will appear in center of page.

Bootstrap make all columns of same height in a row — August 17, 2017
Bootstrap 3 place block in center — June 26, 2017
Css wrap words in div or in table column — March 8, 2017