HTML+CSS水平垂直居中
啦啦啦，好了，今天來分享自己的第一個知識點，難得自己還能想起來過來部落格園，寫寫部落格的。
好了，言歸正傳，今天分享關於html和css的一個簡單的知識點，對於大部分從事前端開發的人員來說可能都是很簡單的，但是，對於我這種患有嚴重健忘症的人還有一些初入前端的小夥伴來說，整理一下可能是有百利而無一害的。
今天就簡單整理一下前端HTML+CSS實現水平垂直劇中的效果
一 >>> 已知元素寬高
方法1：
position:absolute;
left:0;
right:0;
top：0;
bottom:0;
margin:auto;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 .wrapper { 12 width: 400px; 13 height:View Code400px; 14 background: rgba(100, 100, 84, .5); 15 } 16 .inner { 17 position: absolute; 18 top: 0; 19 left: 0; 20 bottom: 0; 21 right: 0; 22 margin: auto; 23 width: 100px; 24 height: 100px; 25 background: #90f5; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="wrapper"> 31 <div class="inner"></div> 32 </div> 33 </body> 34 </html>
下面是效果圖：
ps:測試的時候還有點小翻車呢，不過問題不大，對子元素設定position：absolute後，元素會脫離文件流進行定位，在父元素上加上position：relative就可以了。
再貼一張圖：
方法2：
positionn:absolute;
left , top:50%;
//包含塊必須是容器
margin-left,margin-top為負的自身寬高的一半
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 .block { 12 position: absolute; 13 top: 50%; 14 left: 50%; 15 margin-left: -200px; 16 margin-top: -200px; 17 width: 400px; 18 height: 400px; 19 background: #0ff; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="block"></div> 25 </body> 26 </html>View Code
貼個效果圖：
二 >>> 元素寬高未知
(當然元素寬高已知的居中方法依舊適用於未知寬高的元素，此處不再贅述)
方法1：
position:absolute;
left , top : 50%;
//包含塊必須是為容器
transform : translate(-50% , -50%);
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 .block { 12 position: absolute; 13 top: 50%; 14 left: 50%; 15 width: 400px; // 沒辦法，此處必須指定元素的寬高，不過問題不大，假裝不知道好了 16 height: 400px; 17 transform: translate(-50%, -50%); 18 background: #0ff; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="block"></div> 24 </body> 25 </html>View Code
執行結果與上圖一致，就不再重複貼啦。
此處，需要關注一個問題，translate（）移動的百分比是相對於元素本身的寬高
方法2：flex佈局
父元素容器display:flex
align-items : center
justify-content : conter
下面是執行效果圖：
flex是CSS3中的屬性，因此在移動端構建彈性盒模型時，如果想用flex就必須要考慮瀏覽器相容性。
三 >>> 單行文字居中
方法1：text-align：center; //水平方向居中 （在父元素中設定）
line-height：$（父元素的高度）//垂直方向居中 （在文字元素中設定）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 .wrapper { 12 width: 400px; 13 height: 400px; 14 background: rgba(100, 100, 84, .5); 15 text-align: center; 16 } 17 .text { 18 line-height: 400px; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="wrapper"> 24 <span class="text">hello,2019年加油</span> 25 </div> 26 </body> 27 </html>View Code
貼個圖：
2019年，大家都要加油呀！
四 >>> 圖片元素居中
圖片元素比較特殊，其display屬性值為inline-block，意味著圖片元素既有塊級元素的特性，例如可以指定寬高等，同時具備行級元素的特性。因此，圖片的水平垂直居中的實現可以用未知寬高和已
知寬高元素的居中方式來實現，此處介紹圖片元素一種特殊的水平居中方式。
在圖片元素的父元素上加text-align：center
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 text-align: center; 11 } 12 .wrapper { 13 width: 400px; 14 height: 400px; 15 background: rgba(100, 100, 84, .5); 16 } 17 img { 18 width: 300px; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="wrapper"> 24 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547137152&di=173ab7466063a1c492761cb613c8172e&imgtype=jpg&er=1&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F40%2F58%2F18bOOOPIC9c.jpg" alt=""> 25 </div> 26 </body> 27 </html>View Code
執行效果貼圖：
從網上隨便拉了張圖，不知道會不會構成侵權呢。不管了，用了再說...
/***************************************************************************************************/
/**** 今天一整天都在複習計算機網路，全英文1000頁，忽然有點慌了 ***/
/**************************************************************************************************/
至此，停筆。
2019-01-04 00:42:23