Home > Developer > JavaScript
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 ;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
