html结构
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html,body,.outer{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.inner{
background: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">inner</div>
</div>
</body>
</html>
水平居中
1.行内元素
父元素设置水平居中
.outer{
text-align: center;
}
.inner{
display: inline;
}
2.块级元素
当前元素设置 margin: 0 auto;
.inner{
margin: 0 auto;
width: 100px;
}
3.若自元素包含浮动
父元素宽度设置位fit-content,配合margin（后需细抠）
.outer{
width: fit-content;
margin: 0 auto;
}
.inner{
float: left;
}
4.使用flex
父元素使用flex布局并设置居中
.outer{
display: flex;
justify-content: center;
}
5.使用CSS3的transform属性
当前元素设置绝对定位
.inner{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
6.在知道元素宽度的情况下使用margin
当前元素设置绝对定位与宽度
.inner{
width: 200px;
margin-left: -100px;
left: 50%;
position: absolute;
}
7.通过绝对定位,同时设置left: 0, right:0; margin: 0 auto;
.inner{
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 100px;
}
垂直居中
1.当行文本
.outer{
line-height: 500px;
height: 500px;
}
.inner{
display: inline;
}
2.行内快级元素
元素高度不定，兼容性好（后续细抠）
.outer::after, .inner{
display: inline-block;
vertical-align: middle;
}
.outer::after{
content: '';
height: 100%;
}
3.vertical-align属性
vertical-align只有在父层为td或者th时，才会生效，对于其他块级元素不支持
body{
display: table;
}
.outer{
display: table-cell;
vertical-align: middle;
}
4.flex
.outer{
display: flex;
align-items: center;
}
5.transform
与水平居中相同
6.在知道元素高度的情况下使用margin
与水平居中相同
7.通过绝对定位,同时设置top: 0, bottom:0; margin:auto 0;
.inner{
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
width: 100px;
}
