CSS3 FLEXBOX輕鬆實現元素的水平居中和垂直居中

時間 2019-11-30
標籤 css3 css flexbox 輕鬆實現元素水平居中垂直欄目 CSS 简体版
原文原文鏈接
  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title></title>
  7     </head>
  8 
  9     <body>
 10         <!--1.清除輸入框內的空格-->
 11         <!--<input type="text" onBlur="replaceSpace(this)" />
 12         <script type="text/javascript">
 13             function replaceSpace(obj) {
 14                 obj.value = obj.value.replace(/\s/gi, '')
 15             }
 16         </script>-->
 17 
 18         <!--2.CSS3 FLEXBOX輕鬆實現元素的水平居中和垂直居中-->
 19         <!--①單個元素水平居中-->
 20         <!--<style>
 21             .box{
 22                 display: -webkit-flex;
 23                 display: -ms-flexbox;
 24                 display: flex;
 25                 justify-content: center;
 26                 background: #0099cc;
 27             }
 28             h1{
 29                 color: #FFF
 30             }
 31         </style>
 32         <div class="box">
 33             <h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
 34         </div>-->
 35 
 36         <!--②多個h1元素水平居中-->
 37         <!--<style>
 38             .box{
 39                 display: flex;
 40                 justify-content: center;
 41                 width: 100%;
 42                 background: #0099cc
 43             }
 44             h1{
 45                 font-size: 1rem;
 46                 padding: 1rem;
 47                 border: 1px dashed #FFF;
 48                 color: #FFF;
 49                 font-weight: normal;
 50             }
 51         </style>
 52         <div class="box">
 53             <h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
 54             <h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
 55             <h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
 56         </div>-->
 57 
 58         <!--③多個h1標籤並排垂直居中-->
 59         <!--<style>
 60             .box{
 61                 display: flex;
 62                 width: 980px;
 63                 height: 30rem;
 64                 align-items:center;
 65                 background: #0099cc
 66             }
 67             h1{
 68                 font-size: 1rem;
 69                 padding: 1rem;
 70                 border: 1px dashed #FFF;
 71                 color: #FFF
 72             }
 73         </style>
 74         <div class="box">
 75             <h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
 76             <h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
 77             <h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
 78         </div>-->
 79 
 80         <!--④同時包含水平，垂直居中-->
 81         <!--<style>
 82             body{display: flex;justify-content:center}
 83             .box{
 84                 display: flex;
 85                 width: 980px;
 86                 height: 30rem;
 87                 justify-content:center;
 88                 background: #0099cc;
 89                 flex-direction:column;
 90                 align-items:center;
 91             }
 92             h1{
 93                 display: flex;
 94                 justify-content:center;
 95                 font-size: 1rem;
 96                 padding: 1rem;
 97                 border: 1px dashed #FFF;
 98                 color: #FFF;
 99                 width: 28rem
100             }
101         </style>
102         <div class="box">
103             <h1>flex彈性佈局justify-content屬性實現元素垂直居中</h1>
104             <h1>flex彈性佈局justify-content屬性實現元素垂直居中</h1>
105             <h1>flex彈性佈局justify-content屬性實現元素垂直居中</h1>
106             <h1>flex彈性佈局justify-content屬性實現元素垂直居中</h1>
107         </div>-->
108 
109         <!--3.CSS3中的px,em,rem,vh,vw辨析-->
110         <!--一、px：像素，精確顯示
111         二、em：繼承父類字體的大小，至關於「倍」，如：瀏覽器默認字體大小爲16px=1em，始終按照div繼承來的字體大小顯示，進場用於移動端
112           em換算工具：http://www.runoob.com/tags/ref-pxtoemconversion.html
113         三、rem：與em相似，rem是繼承根節點的屬性（即<html>標籤），其餘的與em相同
114         四、vh：當前可見高度的1%=1vh
115                  區別是：當div中沒有內容時，height=100%，則高度不顯示出來
116                當div中沒有內容時，height=100vh，則高度依然能顯示出來
117         五、vw：當前可見寬度的1%=1vw
118                區別是：當div中沒有內容時，width=100%，則寬度不顯示出來
119                當div中沒有內容時，width=100vh，則寬度依然能顯示出來-->
120 
121         <!--4.CSS全局控制-->
122         <!--<style>
123             body {
124                 margin: 0;
125                 padding: 0;
126                 font-size: 14px;
127                 line-height: 22px;
128                 height: auto;
129                 font-family: "微軟雅黑";
130                 color: #3e3938;
131                 -webkit-text-size-adjust: none;
132             }
133             body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,dt,img,form {
134                 padding: 0px;
135                 margin: 0px;
136                 border: 0;
137                 font-size: 14px;
138             }
139             .clear {
140                 clear: both;
141             }
142             a:link,
143             a:visited {
144                 text-decoration: none;
145             }
146             a:hover {
147                 text-decoration: none;
148             }
149             a:focus {
150                 outline: none;
151             }
152             a {
153                 text-decoration: none;
154                 blr: expression(this.onFocus=this.blur());
155             }
156             a {
157                 outline: none;
158             }
159             ul,
160             ol li {
161                 list-style: none;
162             }
163         </style>-->
164 
165         <!--5.css水平垂直居中（絕對定位居中）-->
166         <!--<style>
167             #box {
168                 position: relative;
169                 height: 500px;
170                 background: #ddd;
171             }
172             .child {
173                 width: 100px;
174                 height: 100px;
175                 background: #269ABC;
176                 margin: auto;
177                 position: absolute;
178                 top: 0;
179                 right: 0;
180                 bottom: 0;
181                 left: 0;
182             }
183         </style>
184         <div id="box">
185             <div class="child"></div>
186         </div>-->
187 
188         <!--6.css水平垂直居中（絕對定位居中）-->
189         <!--<style type="text/css">
190             ul li
191             {
192                 list-style-type:georgian;
193                 text-align:left;
194              }
195             .mark
196             {
197                 width:140px;
198                 height:40px;
199                 color:Olive;
200                 text-align:center;
201                 line-height:40px;
202                 margin:5px;
203                 float:left;
204              }
205               .redball
206             {
207                 width:40px;
208                 height:40px;
209                 border-radius:20px;
210                 background-color:Red;
211                 text-align:center;
212                 line-height:40px;
213                 margin:5px;
214                 float:left;
215             }
216             .ball
217             {
218                 width:40px;
219                 height:40px;
220                 border-radius:20px;
221                 background-color:Aqua;
222                 text-align:center;
223                 line-height:40px;
224                 margin:5px;
225                 float:left;
226             }
227             .line
228             {
229                 clear:left;
230              }
231             header
232             {
233                 height:80px;
234                 border:1px solid gray;
235             }
236             .left
237             {
238                 border:1px solid gray;
239                 float:left;
240                 width:30%;
241                 height:480px;
242                 margin-left:0px;
243                 margin-right:0px;
244                 
245             }
246             aside
247             {
248                 text-align:center;
249             }
250             section
251             {
252                 width:69.5%;
253                 float:left;
254                 height:480px;
255                 border:1px solid gray;
256                 margin-left:0px;
257                 margin-right:0px;
258             }
259             footer
260             {
261                 clear:left;
262                 height:60px;
263                 border:1px solid gray;
264             }
265             input[type="button"]
266             {
267                 width:80px;
268                 text-align:center;
269                 margin-top:10px;
270              }
271         </style>
272         
273         <header>
274             <h1>直接插入排序(Straight Insertion Sort)Demo</h1>
275         </header>
276         <aside class="left">
277         
278             <input type="button" id="btnInit" value="Init" onclick="initDiv();" />
279             <br />
280             <input type="button" id="btnSetValue" value="SetValue" onclick="setElementsValue();" />
281             <br />
282             <input type="button" id="btnSort" value="Sort" onclick="setSISortValue();" />
283             <br />
284             <h3>直接插入排序(Straight Insertion Sort)</h3>
285             <ul>
286                 <li>將一個記錄插入到已排序好的有序表中，從而獲得一個新，記錄數增1的有序表。</li>
287                 <li>即：先將序列的第1個記錄當作是一個有序的子序列，而後從第2個記錄逐個進行插入，直至整個序列有序爲止。</li>
288                 <li>若是遇見一個和插入元素相等的，那麼插入元素把想插入的元素放在相等元素的後面。因此，相等元素的先後順序沒有改變。</li>
289                 <li>從原無序序列出去的順序就是排好序後的順序，因此插入排序是穩定的。</li>
290                 <li>時間複雜度O(n<sup>2</sup>)</li>
291             </ul>
292         </aside>
293         <section id="mainArea">
294         
295         </section>
296         <footer>
297             這是底部信息
298         </footer>
299         <script type="text/javascript">
300             function initDiv() {
301                 var mainArea = document.getElementById("mainArea");
302                 for (var i = 0; i < 8; i++) {
303                     var newDivLine = document.createElement("div");
304                     newDivLine.setAttribute("class", "line");
305                     mainArea.appendChild(newDivLine);
306                     for (var j = 0; j < 9; j++) {
307                         var newDiv = document.createElement("div");
308                         var id = i.toString() + j.toString();
309                         newDiv.setAttribute("id", id);
310                         if (j < 8) {
311                             newDiv.setAttribute("class", "ball");
312                         } else {
313                             newDiv.setAttribute("class", "mark");
314                         }
315                         newDivLine.appendChild(newDiv);
316                     }
317                 }
318             }
319     
320             //初始元素賦值
321             var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1];
322             function setElementsValue() {
323                 for (var i = 0; i < arrTmp.length; i++) {
324                     document.getElementById("0" + i.toString()).innerText = arrTmp[i];
325                 }
326                 document.getElementById("08").innerText = "原始數據";
327             }
328     
329             //排序
330             function setSISortValue() {
331                 for (var i = 1; i < arrTmp.length; i++) {
332                     var m = 0;//爲了記錄插入的位置，方便標記
333                     //若第i個元素大於i-1元素，直接插入。小於的話，移動有序表後插入
334                     if (arrTmp[i] < arrTmp[i - 1]) {
335                         var x = arrTmp[i]; //複製爲哨兵(臨時變量)，即存儲待排序元素  
336                         var j = i - 1;
337                         arrTmp[i] = arrTmp[i - 1]; //前後移一個元素 
338                         //循環查找在有序表的插入位置，若是要插入的值小於，則繼續查找，並將元素後移。
339                         while (x < arrTmp[j]) {
340                             arrTmp[j + 1] = arrTmp[j];
341                             j--;
342                         }
343                         //查找完畢後，插入到正確位置（即要插入的值大於前面的元素）
344                         arrTmp[j + 1] = x;
345                         m = j + 1;
346                     } else {
347                         m = i;
348                     }
349                     //顯示出來
350                     for (var k = 0; k < arrTmp.length; k++) {
351                         document.getElementById((i).toString() + k.toString()).innerText = arrTmp[k];
352                         if (m == k) {
353                             document.getElementById((i).toString() + (k).toString()).setAttribute("class", "redball");
354                         }
355                     }
356                     document.getElementById((i).toString() + "8").innerText = "第 " + (i).toString() + " 趟排序";
357                 }
358             }
359         </script>-->
360 
361         <!--7.css水平垂直居中（絕對定位居中）-->
362         <!--<style>
363             .container{
364                 width: 500px;
365                 height: 400px;
366                 border: 2px solid #379;
367                 position: relative;
368             }
369             .inner{
370                 width: 480px;
371                 height: 380px;
372                 background-color: #746;
373                 position: absolute;
374                 top: 50%;
375                 left: 50%;
376                 margin-top: -190px;
377                 margin-left: -240px;
378             }
379         </style>
380         <div class="container">
381             <div class="inner"></div>
382         </div>-->
383 
384         <!--8.css水平垂直居中（絕對定位居中）-->
385         <!--<style>
386             div{
387                 width: 300px;
388                 height: 300px;
389                 border: 3px solid #555;
390                 display: table-cell;
391                 vertical-align: middle;
392                 text-align: center;
393             }
394             img{
395                 vertical-align: middle;
396             }
397         </style>
398         <div>
399             <img src="img/HBuilder.png" />
400         </div>-->
401 
402         <!--9.css水平垂直居中（絕對定位居中）-->
403         <!--<style>
404             .container{
405                 width: 300px;
406                 height: 200px;
407                 border: 3px solid #546461;
408                 display: -webkit-flex;
409                 display: flex;
410                 -webkit-align-items: center;
411                 align-items: center;
412                 -webkit-justify-content: center;
413                 justify-content: center;
414             }
415             .inner{
416                 border: 3px solid #458761;
417                 padding: 20px;
418             }
419         </style>
420         <div class="container">
421             <div class="inner">
422                      我在容器中水平垂直居中
423             </div>
424         </div>-->
425 
426 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。