css常规水平居中&&垂直居中方案

前言

无论水平居中还是垂直居中相信你并不陌生，但有多少种实现方式，每种的优劣以及兼容性相信你并不清楚。

水平居中

行内标签水平居中

• 基本实现设置父标签内容居中对齐，然后子标签为行级内容时就可以实现效果。 .par{text-align:center;}

块级标签水平居中

• 保证块级，保证有宽高，设置位置关系为左右居中； .sub{margin:0 auto;} .sub{margin-left: auto;margin-right:auto;}

垂直居中

• 单行文本垂直居中，行高等于高度 .par{ height:40px; line-height:40px}
• 单行文本和图片垂直居中，行高等于高度，并且设置对齐方式为middle，前提图片的高度在行高之内 .par{ height:40px;line-height:40px;} .par .sub{vertical-align:middle;}
• 容器高度不确定，多行文本垂直居中，内容整体高度不确定，padding-top=padding-bottom,
• 容器高度确定，多行文本垂直居中，内容整体高度不确定 //方案一 .par{display:table;} .par .sub{ display:table-cell; vertical-align:middle;} //方案二 .par .sub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)} //方案三，缺一不可,必须保证三行代码 .par { display:flex; flex-direction:column; justify-content:center;} //方案 四 根据line-height 对行内块级元素的修饰 <div class="mutiLinesContainer"> <span>这里是高度为150像素的标签内的多行文字，文字大小为12像素。文字大小为12像 素。<br>第二行文字</span> </div> .mutiLinesContainer{ margin-top: 10px; width:500px; height:150px; line-height:150px; overflow:hidden; border:1px solid red; font-size:0; span,div{ display:inline-block; font-size:12px; line-height:20px; vertical-align:middle; } }
• 容器高度确定，内容整体高度确定 //方案一 .par{ height:200px; } .par：before{ height: 50%; content: ""; width: 100%; display: block; } .par .sub{ height:50px; margin-top:-25px； } //
• 方案二 .par{ height:200px; } .par .sub{ height:50px; position:absolute; left:50%; top:50%; margin-top:-25px； } //
• 方案三，缺一不可 .par { display:flex; flex-direction:column; justify-content:center;}