Use Sass to align vertically and horizontally in CSS elegantly and efficiently (with Flex layout, CSS3 + SASS perfect edition), sasscss3

Source: Internet
Author: User

Use Sass to align vertically and horizontally in CSS elegantly and efficiently (with Flex layout, CSS3 + SASS perfect edition), sasscss3

There are many ways to implement horizontal and vertical center of css. Here I will briefly describe the following four commonly used methods:

1. Use the Flex layout in CSS3

What we need to know about flex is that it is a display attribute, and it must be set for its parent element (flex must be used in combination with absolute positioning !!!!!), In addition to setting display: flex, there are two other attributes that need to be set: justify-content and align-items, which respectively mean the normal and vertical center. The HTML + CSS code is as follows:

body {    position: absolute;    width: 100%;    height: 100%;    display: flex;    justify-content: center;    align-items: center;}.parentNode {    width: 400px;    height: 400px;    background: #f00;}
<body>    <div class="parentNode"></div></body>

When the demand changes, for example, we need to nest a div in this div. According to the above mentioned, we also need to set the vertical and horizontal center of the sub-DIV to the parent DIV.

<! DOCTYPE html> 

2. Use transform in CSS3

.parentNode {    width: 400px;    height: 400px;    background: #f00;     position: absolute;      left: 50%;    top: 50%;    transform: translate(-50%, -50%);}

 

3. When you know the width and height of an element, use the most common margin in CSS2.

.parentNode {    width: 400px;    height: 400px;    background: #f00;     position: absolute;      left: 50%;    top: 50%;    margin: -200px 0 0 -200px;}

 

4. Use special margin: auto

. ParentNode {width: 400px; height: 400px; background: # f00; overflow: auto; margin: auto; // In the case of a standard stream, set margin-top and margin-bottom to 0 position: absolute; top: 0; left: 0; bottom: 0; right: 0; // make the browser re-render the area where the element is located. The four values are set to 0 so that the entire window is re-rendered for the element, after that, both margin-top and margin-bottom are equal}

Now let's use the powerful SASS to reconstruct these styles. Let's take the flex first,

@mixin center {    display: flex;    justify-content: center;    align-items: center;}body {    position: absolute;     width: 100%;    height: 100%;    @include center;
.parentNode { width: 400px; height: 400px; background: #f00; position: relative; @include center;
.childNode { width: 200px; height: 200px; background: #fff; } }}

If there are several small styles in your website, such as colors and fonts, you can use the "$" variable in Sass for unified processing, then this option is good. However, when your style becomes more and more complex and you need to reuse a large section style, you cannot use variables to reach our goal. In this case, the mixed Macros in Sass become very meaningful. @ mixin is a keyword used to declare the mixed macros, which is similar to @ media and @ font-face in CSS. Center is the name of the hybrid macro. The braces contain reusable style codes. @ Include is used to call a hybrid macro. In addition to declaring a Mixed Macro without parameters, you can also define a Mixed Macro with parameters and write more complex logic.

Below I will use the if else statement and the @ mixin hybrid macro to encapsulate the 2, 3, and 4 methods above.

The idea is to first absolutely locate the upper left corner of the DIV to the center of the container, and then add two optional parameters ($ width, $ height) for mixin, which respectively represent the width and height of the element, if a parameter is passed, the negative value is used.marginCenter. If no parameters are passed, CSS is used.Transform 3.

/*** Set the positioning context for the child element */. parent {position: relative;}/*** enables the sub-element to be absolutely centered in the parent container * without passing width and height to Sass mixin. the CSS transform attribute is used to achieve the center effect */. child-with-unknown-direction {@ include center;}/*** let the child element absolutely center in the parent container * to pass the width to Sass mixin, therefore, the negative margin is used to process the horizontal position, and * the CSS transform translateY is used to process the vertical position */. child-with-known-width {@ include center (400px);}/*** let the child element be absolutely centered in the parent container * and pass the height to Sass mixin, therefore, the negative margin is used to process the vertical position, and * the CSS transform translateX is used to process the horizontal position */. child-with-known-height {@ include center ($ height: 400px);}/*** let the child element absolutely center in the parent container * and pass the height and width to Sass mixin, therefore, the negative margin is used to process the horizontal and vertical positions */. child-with-known-direction {@ include center (400px, 400px );}

Now we start to encapsulate @ mixin, which is determined by the CSS analysis above. to center, we must first make the element absolutely positioned.

@mixin center($width: null, $height: null) {    position: absolute;    top: 50%;    left: 50%;}

Then build the @ mixin skeleton according to the following logic

Width Height Solution
Null Null Translate
Defined Defined Margin
Defined Null Margin-left + translateY
Null Defined Margin-right + translateX

 

 

 

 

 

@mixin center($width:null,$height:null){    display: flex;    justify-content: center;    align-items: center;    @if $width and $height {        // do margin    } @else if not $width and not $height {        // do transform translate(-50%,-50%)    } @else if not $width {        // do margin-top and transform translateX    } @else {    // do margin-left and transform translateY    }}

Finally, we insert the specific code into different conditions.

@ Mixin center ($ width: null, $ height: null) {position: absolute; top: 50%; left: 50%; @ if $ width and $ height {// do margin width: $ width; height: $ height; margin:-($ height/2) #{0 0}-($ width/2); // If 0 0 is directly written here, it will be compiled as margin: xx 0 xx instead of margin: xx 0 xx, so use # {0}
} @ Else if not $ width and not $ height {// do transform translate (-50%,-50%) transform: translate (-50%,-50 );} @ else if not $ width {// do margin-top and transform translateX height: $ height; margin-top:-(height/2); transform: translateX (-50%) ;}@ else {// do margin-left and transform translateY width: $ width; margin-top:-(width/2); transform: translateY (-50% );}}

Finally, we can use the Koala software for offline compilation or through http://www.sassmeister.com/to compile the compilation results.

@ Charset "UTF-8";/*** sets the positioning context for the child element */. parent {position: relative;}/*** enables the sub-element to be absolutely centered in the parent container * without passing width and height to Sass mixin. the CSS transform attribute is used to achieve the center effect */. child-with-unknown-direction {position: absolute; top: 50%; left: 50%; transform: translate (-50%,-50 );} /*** let the child element be absolutely centered in the parent container * and pass the width to Sass mixin. Therefore, the negative margin is used to process the horizontal position, and * the CSS transform translateY is used to process the vertical position */. child-with-known-width {position: absolute; top: 50%; left: 50%; width: 400px; margin-top:-width/2; transform: translateY (-50%);}/*** let the child element be absolutely centered in the parent container * and pass the height to Sass mixin. Therefore, the negative margin is used to process the vertical position, * use CSS transform translateX to process the horizontal position */. child-with-known-height {position: absolute; top: 50%; left: 50%; height: 400px; margin-top:-height/2; transform: translateX (-50%);}/*** let the child element be absolutely centered in the parent container * to pass the height and width to Sass mixin, so the negative margin is used to process the level and vertical position */. child-with-known-direction {position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin:-200px 0 0-200px ;}

  

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.