css 水平垂直居中
摘自https://www.cnblogs.com/Julia-Yuan/p/6648816.html
水平垂直居中
一.对于确定宽度的块级元素：
脱离文档流元素的居中
方案一：
div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
方案二：
div绝对定位水平垂直居中【margin 负间距】
div{
width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
方案三：
div绝对定位水平垂直居中【Transforms 变形】
兼容性：IE8不支持；
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
二、对于未知宽度的块级元素：
1.弹性盒子
.box{
height:600px;
display:flex;
justify-content:center;
align-items:center;
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
background: green;
width: 200px;
height: 200px;
}
2.将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。
/*
table-cell实现居中
将父盒子设置为table-cell元素，设置
text-align:center,vertical-align: middle;
子盒子设置为inline-block元素
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
.cell #aa{
display:inline-block;
height: 30px;
width: 30px;
background-color: red;
}
</style>
</head>
<body>
<div class="cell">
<p>我爱你</p>
</div>
<div class="cell">
<p>我爱你</p><p>亲爱的中国</p>
</div>
<div class="cell">
<p>我爱你</p><p>亲爱的中国</p><div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>
</div>
<div class="cell">
<p id="aa"></p>
</div>
实现水平居中
（1）table标签配合margin左右auto实现水平居中
使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto
（2）inline-block实现水平居中方法
display：inline-block;（或display:inline）和text-align:center;实现水平居中
存在问题：需额外处理inline-block的浏览器兼容性（解决inline-block元素的空白间距）
（3）绝对定位实现水平居中
绝对定位+transform，translateX可以移动本省元素的50%
.content{
position: absolute;
left: 50%;
transform: translateX(-50%); /* 移动元素本身50% */
background: aqua;
}
不懂（4）相对定位实现水平居中
用float或者display把父元素变成行内块状元素
.contentParent{
display: inline-block; /* 把父元素转化为行内块状元素 */
/*float: left; 把父元素转化为行内块状元素 */
position: relative;
left: 50%;
}
/目标元素/
.content{
position: relative;
right: 50%;
background-color:aqua;
}
（5）CSS3的flex实现水平居中方法，法一
.contentParent{
display: flex;
flex-direction: column;
}
.content{
align-self:center;
}
（6）CSS3的flex实现水平居中方法，法二
.contentParent{
display: flex;
}
.content{
margin: auto;
}
（7）CSS3的fit-content配合左右margin为auto实现水平居中方法
.content{
width: fit-content;
margin-left: auto;
margin-right: auto;
}
实现垂直居中
