CSS垂直居中-dehua.Chen

1 
 
2 水平垂直居中水平垂直居中
3 
 

 1 html,body{ 
 2 margin: 0;
 3 }
 4 .wrap{
 5 line-height: 400px;
 6 text-align:center;
 7 
 8 height: 400px;
 9 font-size: 36px;
10 background-color: #ccc;
11 }

1 
 
2 

3 
 

 1 .wrap{
 2 margin-top: 20px;
 3 margin-left: auto;
 4 margin-right: auto;
 5 width: 400px;
 6 height: 400px;
 7 background-color: #ccc;
 8 .content{
 9 padding: -webkit-calc(~"(100% - 100px) / 2");
10 padding: calc(~"(100% - 100px) / 2");
11 width: 100px;
12 height: 100px;
13 background-color: #333;
14 background-clip: content-box;
15 }
16 }

1 
2 絕對對位原理：元素在過度受限情況下，將margin設置為auto，瀏覽器會重算margin的值，
過度受限指的是同時設置top/bottom與height或者left/right與width。
3 
4 

1 .absolute_center{
 position:absolute;
 width:200px; 
 height:200px;
 top:0;
 bottom:0;
 left:0; 
right:0; 
margin:auto; 
background:#518fca; 
overflow:auto; 
resize:both;/*用于設置了所有除overflow為visible的元素*/
}

1 .negative_margin_top{ 
 width:200px; 
 height:200px; 
 position:absolute;
 top:50%;
 left:0;
 right:0;
 margin:auto;
 margin-top:-100px; /*-(height+padding)/2*/ } 

1 

2 

3 
元素高度已知，在center元素外插入一個額外元素floater，設置floater的height為50%；
margin-bottom為center元素高度的一半(height + padding) / 2。內容超過元素高度時需要設置overflow決定滾動條的出現(xiàn)。
4 

1 .floater{ 
 height:50%;
 margin-bottom:-100px;
}
2 .floater_center{
height:200px;
width:200px;
margin:auto;
}

1 .container2{
display:table; 
height:100%;
}
2 .table_cell{
/*將cell垂直居中，如果外層div不為table則tablecell必須有高度*/
display:table-cell;
vertical-align:middle;
}

 
生命里有著多少的無奈和惋惜,又有著怎樣的愁苦和感傷?
 雨浸風蝕的落寞與蒼楚一定是水,靜靜地流過青春奮斗的日子和觸摸理想的歲月。
 

1 .container{display:block;}
2 /*inline-block的前世今生*/
3 .container:after{content: '';
 display: inline-block;
vertical-align: middle;
height: 100%;
}
4 .inline_block{
display:inline-block;
vertical-align:middle;
}

1 
其實我們每個人的生活都是一個世界，即使最平凡的人也要為他生活的那個世界而奮斗。
2 

1 .single_line{
height: 30px; 
font-size: 14px;
line-height: 30px;
border: 1px solid #518dca;
}

1 

2 
既要腳踏實地于現(xiàn)實生活，又要不時跳出現(xiàn)實到理想的高臺上張望一眼。
在精神世界里建立起一套豐滿的體系，引領我們不迷失不懈怠。
待我們一覺醒來，跌落在現(xiàn)實中的時候，可以毫無怨言地勇敢地承擔起生活重擔。
這是孫少平教給我的道理。 
只能永遠把艱辛的勞動看做生命的必要，即使沒有收獲的指望，也心平氣靜地繼續(xù)耕種。

3 要做到這一點，路還好長。
4 
5 
 

1 .is-Flexbox {display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}