html div line height,CSS深入理解之line-height

简单的情况text-align:center;  vertical-align: middle等，下面是复杂一点的：

// 方法一：已知元素的高宽

CSS：

.content{

background-color:#6699FF;

width:200px;

height:200px;

position: absolute;

top: 50%;

left: 50%;

/* 二分之一的负height，width  */

margin-top:-100px ;

margin-left: -100px;

}

//方法二:未知元素的高宽

CSS：

.content{

background-color:#6699FF;

width:200px;

height:200px;

position: absolute;

/* transform: translate(-50%,-50%)  或 margin:auto与四边距相等 */

margin:auto;      /*无这个就只有top、left起作用*/

top: 0;

left: 0;

bottom:0;

right: 0;

}

//3，两个按钮在div中居中，并相距一定距离

div{width: 600px;height: 500px;background-color: rgba(240,240,240,0.9);text-align:

center;}

.button{ width:100px;height: 90px;background-color: #f00;position: relative;top: 50%;

transform: translate(0,-50%)  }

.button1{margin-left: 0;margin-right: 100px;}

.button2{margin-right: 0;}