Method 1: Use localization (common method, recommended)

<! 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 code

Method 2: Use margin: Auto;

<! 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 code

Method 3: Run display:table-cell

<! 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 code

Method 4: use display: flex; Center both vertical and horizontal

<! 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 code

Method 5: Calculate the space distance between the parent box and the child box (this is the same reason as method 1)

<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; } .child { width: 100px; height: 100px; border: 1px solid #999; margin-top: 200px; margin-left: 200px; } < / style > < / head > < body > < div class = "parent" > < div class = "child" > I am a child element < / div > < / div > < / body > < / HTML >Copy the code

Method 6: 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 code