面试的时候被问起这道题目，但是我只记住了其中的三种，最简单的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>(固定宽高)负margintitle>
<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文件，粘贴即可使用。
如果以上内容存在任何问题，请不吝赐教。欢迎在留言区指正。
如果还有其它不错的方法，也可以在留言区留言，共同进步。