实现水平与垂直居中
水平居中
行内元素
text-align:center;
块级元素
定宽:可以采取决定定位的方式实现
.center {
width: 960px;
position: absolute;
left: 50%;
margin-left: -480px;
}
不定宽:借助css3的变形属性Transform来完成
.content {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
垂直居中
单行文本的水平垂直居中
元素的高度和行高相等时,文本呈现垂直居中 height == line-height 高等于行高
多行文本的水平垂直居中
不固定高度的垂直居中
通过设置padding实现
固定高度的垂直居中
使用display设置为 table-cell, 配合样式vertical-align设置为middle来实现table-cell:以表格单元格的形式来解析代码
块级元素水平垂直居中
固定宽高的水平垂直居中
.content {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
不固定宽高的水平垂直居中
.content {
position: absolute;
left: 50%;
top: 50%;
/* 左/上边缘向左/上移动自身宽/高度的一半 */
transform: translate(-50%, -50%);
}
基于Flex实现水平垂直居中
移动端开发中的最佳解绝方案
.content {
/*转为flex弹性盒布局*/
display: flex;
/*主轴上的对齐方式为居中*/
justify-content: center;
/*交叉轴上对齐方式为居中*/
align-items: center;
}