让元素居中的方法！
水平居中（行内元素）
01 text-align: center 【在你需要居中的元素的父元素中添加这个属性即可！】
<style>
.outer {
text-align: center;
}
</style>
</head>
<body>
<div class="outer" style="width: 200px;height: 200px;background-color: #ccc;teal">
<span class="inner" style="background-color: red">
lvhang
</span>
</div>
</body>
垂直居中（只针对单行文本）
02 line-height: 父元素的高度！;
<style>
.outer {
line-height: 200px;
}
</style>
</head>
<body>
<div class="outer" style="width: 200px;height: 200px;background-color: #ccc;teal">
<span class="inner" style="background-color: #aaff44">
lvhang
</span>
</div>
</body>
以上的属性只针对行内元素， 但是text-align 比较特别， 就是他是让父元素的内容居中【不管你是不是块元素还是行内元素！】
水平居中（块级元素）
margin: 0 auto; 在你想要居中的元素上面添加这个属性！
<style>
.inner {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="outer" style="width: 200px;height: 200px;background-color: #ccc;teal">
<div class="inner" style="width: 50px;height: 50px;background-color: #aaff44">
</div>
</div>
</body>
水平垂直居中
1 定位 （知道元素具体宽高的情况下！）
<style>
.outer {
/* 在父元素上添加相对定位 */
position: relative;
}
.inner {
/* 在子元素上添加绝对定位！ */
position: absolute;
top: 50%;
left: 50%;
/* 让自己走自身高度和宽度的一半！ */
margin-top: -25px;
margin-left: -25px;
</style>
</head>
<body>
<div class="outer" style="width: 200px;height: 200px;background-color: #ccc;teal">
<div class="inner" style="width: 50px;height: 50px;background-color: #aaff44">
</div>
</div>
</body>
2 利用CSS中的calc属性！
<style>
.outer {
/* 在父元素上添加相对定位 */
position: relative;
}
.inner {
/* 在子元素上添加绝对定位！ */
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
}
</style>
</head>
<body>
<div class="outer" style="width: 200px;height: 200px;background-color: #ccc;teal">
<div class="inner" style="width: 50px;height: 50px;background-color: #aaff44">
</div>
</div>
</body>
<style>
.outer {
/* 在父元素上添加相对定位 */
position: relative;
}
.inner {
/* 在子元素上添加绝对定位！ */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="outer" style="width: 200px;height: 200px;background-color: #ccc;teal">
<div class="inner" style="width: 50px;height: 50px;background-color: #aaff44">
</div>
</div>
</body>
4 定位 + margin
<style>
.outer {
/* 在父元素上添加相对定位 */
position: relative;
}
.inner {
/* 在子元素上添加绝对定位！ */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="outer" style="width: 200px;height: 200px;background-color: #ccc;teal">
<div class="inner" style="width: 50px;height: 50px;background-color: #aaff44">
</div>
</div>
</body>
5 flex布局
<style>
.outer {
/* 在父元素上添加这个属性！ */
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中！ */
align-items: center;
}
</style>
</head>
<body>
<div class="outer" style="width: 200px;height: 200px;background-color: #ccc;teal">
<div class="inner" style="width: 50px;height: 50px;background-color: #aaff44">
</div>
</div>
</body>