How do I center a box horizontally and vertically
In everyday web development, we often need to center one box horizontally and vertically in another box. Here are some common ways to do this
Method 1: Use localization (common method, recommended)
The advantage of this method is simple and intuitive. It mainly uses positioning. After positioning elements, margin style is used to adjust elements according to half of their width and height value, so that they are centered
The disadvantage is also obvious, we know the width and height of the child element, if we can’t determine the width and height of the child element, then this method is not very suitable
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> <style>. Parent {width: 500px; height: 500px; border: 1px solid #000; position: relative; } .child { width: 100px; height: 100px; border: 1px solid #999; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; } < / style > < / head > < body > < div class = "parent" > < div class = "child" > I am a child element < / div > < / div > < / body > < / HTML >Copy the codeMethod 2: Use margin: Auto
This method makes use of another feature of positioning. By setting values in the four directions, the element automatically calculates the distance from the four directions
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> <style>. Parent {width: 500px; height: 500px; border: 1px solid #000; position: relative; } .child { width: 100px; height: 100px; border: 1px solid #999; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } < / style > < / head > < body > < div class = "parent" > < div class = "child" > I am a child element < / div > < / div > < / body > < / HTML >Copy the codeMethod 3: Run display:table-cell
This method modifies the block-level attributes of the element itself to support vertical alignment
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> <style>. Parent {width: 500px; height: 500px; border: 1px solid #000; display: table-cell; vertical-align: middle; text-align: center; } .child { width: 100px; height: 100px; border: 1px solid #999; display: inline-block; } < / style > < / head > < body > < div class = "parent" > < div class = "child" > I am a child element < / div > < / div > < / body > < / HTML >Copy the codeMethod 4: use display: flex; Center both vertical and horizontal
This approach makes important use of the properties of scalable layouts, which are often used in development
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> <style>. Parent {width: 500px; height: 500px; border: 1px solid #000; display: flex; justify-content: center; align-items: center; } .child { width: 100px; height: 100px; border: 1px solid #999; } < / style > < / head > < body > < div class = "parent" > < div class = "child" > I am a child element < / div > < / div > < / body > < / HTML >Copy the codeMethod 5: Use Transform
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> <style>. Parent {width: 500px; height: 500px; border: 1px solid #000; position: relative; } .child { width: 100px; height: 100px; border: 1px solid #999; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } < / style > < / head > < body > < div class = "parent" > < div class = "child" > I am a child element < / div > < / div > < / body > < / HTML >Copy the codeConclusion: The above methods can be used according to the need