CSS总结——元素的垂直居中（已知高度/未知高度）
Posted Krystal_M
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS总结——元素的垂直居中（已知高度/未知高度）相关的知识，希望对你有一定的参考价值。
元素的垂直居中
1、已知高度宽度元素的水平垂直居中
① 绝对定位居中
.center{
margin:auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
② 绝对定位与负边距实现
.center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
2、未知高度宽度元素的水平垂直居中
① 当元素为inline 或 inline-block时
#content {
display：table-cell； //表格单元格显示
text-align：center； //文本水平居中对齐
vertical-align：middle； //元素垂直居中对齐
}
#center{ }
② 利用css3的 transform
# content {
position:relative;
}
#center {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); //定义2D转换
}
③ 利用css3的 flex 布局 — CSS3 flex容器，所有子元素为容器成员（火狐、谷歌支持）
#content{
display：flex；
justify-content：center； //在主轴上居中对齐
align-items：center； //在交叉轴上居中对齐
}
#center{ }
ps：transform 和 flex 虽高效好用，但存在很多兼容问题。
以上是关于CSS总结——元素的垂直居中（已知高度/未知高度）的主要内容，如果未能解决你的问题，请参考以下文章