preface

This paper mainly summarizes some methods used in the actual development process to achieve the horizontal vertical box in the middle, for some unpopular methods not to do too much redundant, mainly is convenient for the subsequent development can be directly used.

Horizontally and vertically centered example

1. Horizontal and vertical centralization is achieved through relative and Absolute of position attributes. The position property specifies the positioning type of the element as: static default. Without positioning, the element appears in the normal stream (ignoring the top, bottom, left, right, or Z-index declarations). Fixed Generates a fixed positioned element relative to the browser window. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes. Relative generates elements that are positioned relative to their normal position. Left :20″ adds 20 pixels to the left position of the element. Example:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> <style type="text/ CSS ">.father { width: 200px; height: 200px; background: yellow; } .child { width: 100px; height: 50px; background: aquamarine; position: relative; left: 30px; } </style> </head> <body> <div class="father"> <div class="child"></div> </div> </body> </html>Copy the code

The child module overlaps with father from left to left, 30px away from father. Absolute Generates an absolutely positioned element relative to the first parent element other than static. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes. Sticky sticky positioning, which is based on the user’s scrolling position. It behaves like position:relative; When the page scrolls beyond the target area, it behaves like Position: Fixed; It will be fixed in the target position. The position of adhesion is determined by setting the top/left/right/bottom values. Sticky An example command output:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> <style type="text/ CSS ">.father { width: 200px; height: 200px; background: yellow; overflow-y: scroll; } .child { width: 100px; height: 50px; background: aquamarine; } .stickydiv { position: sticky; top: 0; width: 100px; height: 50px; background: red; } </style> </head> <body> <div class="father"> <div class="child">child1</div> <div class="child">child2</div> <div class="stickydiv">stickydiv</div> <div class="child">child3</div> <div class="child">child4</div> <div class="child">child5</div> <div class="child">child6</div> </div> </body> </html>Copy the code

Before rolling:



When I scroll to StickyDiv beyond the visual interface, styckyDiv sticks to top 0.

Inherit specifies that the value of the Position property should be inherited from the parent element. Initial Sets the property to the current default value. Use absolute and relative to achieve horizontal and vertical centralization in four ways:

  • Method 1
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> <style type="text/ CSS ">.father { width: 200px; height: 200px; background: yellow; position: relative; } .child { width: 100px; height: 50px; background: aquamarine; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -25px; } </style> </head> <body> <div class="father"> <div class="child"></div> </div> </body> </html>Copy the code
  • Way 2
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> <style type="text/ CSS ">.father { width: 200px; height: 200px; background: yellow; position: relative; } .child { width: 100px; height: 50px; background: aquamarine; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="father"> <div class="child"></div> </div> </body> </html>Copy the code
  • Methods 3
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> <style type="text/ CSS ">.father { width: 200px; height: 200px; background: yellow; position: relative; } .child { width: 100px; height: 50px; background: aquamarine; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } </style> </head> <body> <div class="father"> <div class="child"></div> </div> </body> </html>Copy the code
  • Methods 4
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> <style type="text/ CSS "> #father { width: 200px; height: 200px; background: yellow; position: relative; } #child { width: 100px; height: 50px; background: aquamarine; } </style> </head> <body> <div id="father"> <div id="child"></div> </div> <script> let fatherDom = document.getElementById('father') let childDom = document.getElementById('child') let fatherDomWidth = fatherDom.clientWidth let fatherDomHeight = fatherDom.clientHeight let childDomWidth = childDom.clientWidth let childDomHeight = childDom.clientHeight childDom.style.position = 'absolute' childDom.style.left = (fatherDomWidth - childDomWidth) / 2 + 'px' childDom.style.top = (fatherDomHeight - childDomHeight) / 2 + 'px' </script> </body> </html>Copy the code

There are several ways to obtain the width of a DOM element: scrollWidth, clientWidth, and offsetWidth. The difference between these three methods is whether the parent is out of range. ScrollWidth: The width that the content should actually occupy, excluding boundaries such as scrollbars. The ideal width the content should occupy when the scroll bar appears. ClientWidth: The width of the content that can be seen, excluding boundaries such as scroll bars, which change with the size of the content displayed. OffsetWidth: The width of the content that can be seen, including boundaries such as scroll bars, varies with the size of the content displayed. Example: (1) No scroll bar

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> <style type="text/ CSS "> #father { width: 200px; height: 50px; background: yellow; display: flex; flex-direction: row; } .child { width: 80px; height: 50px; background: aquamarine; } </style> </head> <body> <div id="father"> <div class="child">child</div> <div class="child">child</div> </div> <script> let fatherDom = document.getElementById("father") console.log('scrollWidth:' + fatherDom.scrollWidth) console.log('clientWidth:' + fatherDom.clientWidth) console.log('offsetWidth:' + fatherDom.offsetWidth) </script> </body> </html>Copy the code

Output:



(2) There are scrollbars

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> <style type="text/ CSS "> #father { width: 200px; height: 50px; background: yellow; display: flex; flex-direction: row; overflow: scroll; } .child { min-width: 80px; height: 50px; background: aquamarine; } </style> </head> <body> <div id="father"> <div class="child">child</div> <div class="child">child</div> <div class="child">child</div> <div class="child">child</div> </div> <script> let fatherDom = document.getElementById("father") console.log('scrollWidth:' + fatherDom.scrollWidth) console.log('clientWidth:' + fatherDom.clientWidth) console.log('offsetWidth:' + fatherDom.offsetWidth) </script> </body> </html>Copy the code

Output:



The four Child modules should theoretically have a width of 320px. ClientWidth is the visual width without the scroll bar and offsetWidth is the visual width with the scroll bar included.

2. Horizontal and vertical centering with Flex.

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> <style type="text/ CSS ">.father { width: 200px; height: 200px; background: yellow; display: flex; align-items: center; justify-content: center; } .child { width: 100px; height: 50px; background: aquamarine; } </style> </head> <body> <div class="father"> <div class="child"></div> </div> </body> </html>Copy the code

conclusion

This paper mainly introduces the method of horizontal vertical center of some boxes commonly used in the development process, and makes a brief analysis of some details in the realization process.