元素水平垂直居中

元素水平垂直居中

发布时间：2018-03-21 15:28:06

1.使用flex布局

html,body{
    height: 100%;
    margin: 0;
}
body{
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    display:-webkit-flex;
    display:flex;
}

2.使元素作为一个表格单元格显示

.cell{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

3.绝对定位

（1）

.absolute{ 
	width: 100%;
	height:100%;
	position: absolute; 
	left:50%;/*水平对齐*/
	top:50%;/*垂直对齐*/
}

（2）如果设置确定的width和height（已知宽高）：

.absolute{
	width:200px;
	height:200px;
	position:absolute;
	left:50%;
	margin-left:-100px;/*宽度的一半*/
	top:50%;
	margin-top:-100px;/*高度的一半*/
}

（3）利用transform中translate（未知宽高）

.absolute{
	width: 未知; 
	height: 未知;
    position: absolute; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%);/*50%为自身尺寸的一半*/
}

（4）利用margin:auto（宽高可未知）

.absolute{
	width: 未知; 
	height: 未知;
    position: absolute; 
    left: 0;
    right: 0; 
    top: 0;
    bottom: 0;
    margin: auto
}