Android,iOS,Gadgets,Reviews Everything About Technology

- Advertisement -

Centering elements vertically on pure CSS

57

CSS Axes

So far, CSS has been a problem that it works primarily along one axis. Depending on the context, this can be a vertical or horizontal axis. And this is great for a stack of block elements (located one after another), for example:

- Advertisement -

~~~ {.css} display: block; width: 100%;


It is also easy to display elements along the horizontal axis using floating elements (float). However, if you want to make elements dynamically on both axes, then you will not have so many options for this. In this case, you will have to use workarounds or JavaScript-based methods. But at the moment the new CSS column (CSS columns) gives us a new hope of achieving this goal using only pure CSS. It is noteworthy that CSS columns give priority to vertical alignment before horizontal alignment.
### Horizontal Centering
The horizontal centering is very simple. There are several ways to achieve the effect of horizontal centering of elements:
### Inline-block and Inline elements with text alignment
Inline-block and Inline elements are treated as text-they calculate their own width values and do not respond to the declared width unless you declared them as block elements (see Next).
~~~{.css}
display: inline; /* [или] display: inline-block; */
text-align: center;

Inline-block and block elements with fields

Elements that are declared as inline-blockor blockcan be aligned horizontally in the center with the help of the left and right margins, which are calculated automatically:

~~~ {.css} display: block; margin-left: auto; margin-right: auto;


### Nuances with vertical centering
Aligning elements vertically was quite a challenge. A lot of workarounds have been published - Chris Coyier (from CSS Triks) did an amazing selection of possible hacks - so I will not describe them here in detail.
For the examples in this article, the following markup is used:
~~~{.html}
<div class="box">
  <div>
      Content that will be centered vertically  
  </div>
</div>

Using a table layout

Easiest and fastest way to get an element centered vertically – making it an element of the table cells: for example, using the display: tableand display: table-celland apply a style vertical-align: middle;

~~~ {.css} html, body {height: 100%; padding: 0px; margin: 0px; }

- Advertisement -

.box {display: table; width: 100%; }

.box> div {display: table-cell; text-align: center; vertical-align: middle; }



### A method based on JavaScript
For people who are not fans of the layout of the table, they can use JavaScript. For our example, I chose jQuery because of its ease of use, but using pure JS, of course, is also possible. Let's make the basic styles in CSS:
~~~{.css}
html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

.box {
    position: relative;
    width: 100%; 
    height: 100%;
}

.box > div {
    position: absolute;
    top: 50%;
    left: 50%;
}

Declaring a parent’s block size is mandatory, because by absolutely positioning the child element, we are tearing it out of the document stream, and therefore the parent block can collapse.

Now we are positioning the inner div , so that its upper left point will be in the middle of the parent, horizontally and vertically. However, since the child element also has a non-zero width, it will be displayed too far down and too far to the left – that’s why this method makes the centering not complete. In order to compensate for the child element based on its contents, we will have to calculate the offset using its own dimensions using JavaScript:

~~~ {.javascript} $ (function () {// Listen to the resize event to recalculate the size of the block $ (window) .resize (function () {$ (‘. box> div’). each (function () { $ (this) .css ({marginTop: $ (this) .outerHeight () -0.5, marginLeft: $ (this) .outerWidth () -0.5});});}). resize (); // Call resize when the DOM has already loaded});



However, the drawback of this method based on JS is that it looks awkward and does not work with visitors who have disabled JS (most likely, it is no longer valid, but nevertheless, I would like to avoid it) and requires listening to window size change events to calculate the dimensions of the element. In addition, browsers call ** resize ** events too often.
### New way: CSS 2D transform
With the advent of support in browsers ** CSS 2D transform ** (up to 80% of users in the world), now you can vertically center elements without special difficulties, although this method still requires one additional level of nesting.
This CSS 2D transform trick is very simple - instead of computing in JavaScript, let the browser engine do the hard work:
~~~{.css}
.box {
    position: relative;
    width: 100%;
    height: 100%;
}

.box > div {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

If you center elements using CSS 2D transform, then users who are unfortunately stuck in old browsers (the reason is that they do not want to update themselves or do not know how or because of the limitations of the company in which they work) will not be serviced. For them, your site will not look exactly right. But you can use a backup option – for example, use Modernizr to detect the absence of CSS transform and use alternative methods to achieve the same effect on browsers that do not support this technology.

In order to support WebKit users, you will need to use the prefix specifically for browsers on this engine, that is -webkit-. This is a bit strange, because the versions of Internet Explorer, namely 10 and above, support the transform property without the need for a prefix -ms.

In addition, you can support the idea of ​​graceful degradation (failover of client web interfaces) and progressive enhancement (progressive improvement), which allow users to use a visually imperfect but fully functional website.

- Advertisement -

Comments