元素水平垂直居中的五种方法
面试的时候被问起这道题目，但是我只记住了其中的三种，最简单的flex布局我都给忘了.....
回来总结一下，避免下次在再出现下这样的尴尬...同时希望对此不太了解的小伙伴们也多了解下。
第一种，使用display: table-cell居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>table-cell居中</title> <style> .w{ display: table-cell; text-align: center; vertical-align: middle; width: 500px; height: 500px; background-color: yellow; } .content{ display: inline-block; vertical-align: middle; width: 320px; height: 320px; background-color: red; } </style> </head> <body> <div class="w"> <div class="content"> </div> </div> </body> </html>
第二种，使用CSS3的transform居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>transform居中</title> <style> .w{ width: 500px; height: 500px; background-color: yellow; position: relative; } .content{ width: 320px; height: 320px; background-color: red; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <div class="w"> <div class="content"></div> </div> </body> </html>
第三种，通过flex的主轴和侧轴实现居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>flex垂直水平居中</title> <style> .w { display: flex; width: 500px; height: 500px; background-color: yellow; justify-content: center; align-items: center; } .content { width: 320px; height: 320px; background-color: red; } </style> </head> <body> <div class="w"> <div class="content"></div> </div> </body> </html>
第四种，使用margin自适应
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>margin自适应</title> <style> .w{ width: 500px; height: 500px; background-color: yellow; position: relative; } .content{ width: 320px; height: 320px; background-color: red; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } </style> </head> <body> <div class="w"> <div class="content"></div> </div> </body> </html>
第五种，负margin （需要知道子元素的固定宽高）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>(固定宽高)负margin</title> <style> .w{ width: 500px; height: 500px; background-color: yellow; position: relative; } .content{ width: 320px; height: 320px; background-color: red; position: absolute; top: 50%; left: 50%; margin-left: -160px; margin-top: -160px; } </style> </head> <body> <div class="w"> <div class="content"></div> </div> </body> </html>
PS：
以上代码直接新建一个html文件，粘贴即可使用。
如果以上内容存在任何问题，请不吝赐教。欢迎在留言区指正。
如果还有其它不错的方法，也可以在留言区留言，共同进步。
