然後自己做一點延伸，再把程式碼敲出來，加深下印象。

水平居中：inline-block + text-align

CSS：

 <style>
        .child1 {
            display: inline-block;
            background: khaki;

        }

        .child2 {
            display: inline-block;
            background: hotpink;
        }

        .parent {
            text-align
 
: center;
            background: lightgreen
        }
    </style>

html:

<div class="parent">
        <div class="child1">demo</div>
        <div class="child2">demo2</div>
    </div>

瀏覽器顯示：

優點：相容性好。缺點：.child1,2裡面的字也會居中，這時候需要用text-align:left 來放到左邊，請看例子。
看，如果給.child1,2

一個寬度，連text都居中了：

我們再延伸一下，如果.child1裡面再有一個.grandchild的話，如果它是inline-block的話，那麼它也會居中，也就是說只要你父元素設定了text-align:center,裡面所有的子子孫孫節點都會繼承這個居中。
請看：
CSS:

<style>
        .child1 {
            display: inline-block;
            background: khaki;
            width:20%

        }

        .child2 {
            display
 
: inline-block;
            background: hotpink;
            width:20%
        }
        .grandchild {
            display: inline-block;
            background:mediumspringgreen;
            width:50%
        }

        .parent {
            text-align: center;
            background: lightgreen
        }
    </style>

html:

  <div class="parent">
        <div class="child1">
            <div class="grandchild">demo</div>
        </div>
        <div class="child2">demo2</div>
    </div>

瀏覽器顯示：

如果不想文字居中的話那麼給.child, 或者是 .grandchild設定text-align:left即可

這裡刪掉了.grandchild, .child1中直接新增文字demo1這樣看得更加清晰點：

水平居中：margin + table

這種方法其實就是css把html裡面的table標籤借過來用，裡面需要包含table, table-row， table-header-group, table-cell等。

下面是個簡單的例子：
CSS:

 <style>
        .child1 {
            display: table-cell;
            background: rebeccapurple;
            width: 20%;

        }

        .child2 {
            display: table-cell;
            background: darkgoldenrod;
            width: 20%;

        }

        .child3 {
            display: table-cell;
            background: cyan;
            width: 20%; 
        }

        .parent {
            display: table;
            margin: 0 auto;
            background: blue

        }

        .brother {
            display: table-row;
            text-align: center;
        }

    </style>

html:

<div class="parent">
        <div class='brother'>
            <div class="child1">demo1</div>
            <div class="child2">demo2</div>
            <div class="child3">demo3</div>
        </div>

    </div>

瀏覽器顯示：

優點：相容性還行。缺點：需要三層才能佈局，而且.parent，和.brother的寬度取決於table-cell的寬度，所以設定不了background-color

水平居中：absolute + transform

CSS:

<style>
        .child1 {
            position: absolute;
            left: 50%;
            background: lightcoral;
            transform: translateX(-50%);
        }

        .parent {
            position: relative;
        }
    </style>

html:

<div class="parent">
        <div class="child1">demo1</div>
    </div>

瀏覽器顯示：

優點：因為設定了absolute所以子元素位置固定，不會影響到兄弟元素。 在定位方面，有的時候我們需要以元素的中心點來定位而不是元素的左側，這是個很好的方法。 確定：因為用到了CSS3的transform，所以有相容性問題。 而且不能用此方法設定多元素的居中排列。

看下面一個例子，就是進行元素的等分排列。
如果有N個元素那麼
left = (100%/N*2) + (100%/N) *n ( n = 0, 1, 2, … N-1);

請看CSS：

 <style>
        .child1 {
            position: absolute;
            left: 10%;
            background: lightcoral;
            transform: translateX(-50%);
        }

         .child2 {
            position: absolute;
            left: 30%;
            background: lightcoral;
            transform: translateX(-50%);
        }

         .child3 {
            position: absolute;
            left: 50%;
            background: lightcoral;
            transform: translateX(-50%);
        }

         .child4 {
            position: absolute;
            left: 70%;
            background: lightcoral;
            transform: translateX(-50%);
        }

         .child5 {
            position: absolute;
            left: 90%;
            background: lightcoral;
            transform: translateX(-50%);
        }

        .parent {
            position: relative;
        }
    </style>

html:

<div class="parent">
        <div class="child1">demo1</div>
        <div class="child2">demo2</div>
        <div class="child3">demo3</div>
        <div class="child4">demo4</div>
        <div class="child5">demo5</div>
    </div>

瀏覽器顯示：

水平居中：margin + …

這裡有幾種用margin: 0 auto來居中的方法:

1. 設定寬度

<style>
        .child1 {
           width: 10%;
           margin: 0 auto;
           text-align: center;
        }
    </style>

<div class="child1">demo1</div>

只要你設定了寬度就可以用margin: 0 auto來居中，不需要父元素。

2 . 用 display：table

<style>
        .child1 {
            display: table;
            margin: 0 auto;
            background:lightcoral;
        }
    </style>

<div class="child1">demo1</div>

以上兩種方法只要設定居中元素本身就好。

3 . 用 display:flex

 <style>
        .child1 {
            margin: 0 auto;
            background:lightcoral;
        }

        .parent {
            display:flex;
        }
    </style>

<div class="parent">
        <div class="child1">demo1</div>
    </div>

這種方法需要在父級元素設定display:flex, 因為用到了 CSS3的flex所以有可能有相容性問題。

想延伸一下，用 margin: 0 auto， 同樣可以實現多個子元素的垂直居中。

  <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
            font-size: 16px
        }
    </style>
    <style>
        .child1,
        .child2,
        .child3 {
            width: 10%;
            margin: 0 auto;
            background: lightcoral;
        }

        .parent {
            position: relative;
            width: 30%;
            height: 3.4rem;
            background: lightgreen
        }
    </style>

 <div class="parent">
        <div class="child1">demo1</div>
        <div class="child2">demo2</div>
        <div class="child3">demo2</div>
    </div>

瀏覽器顯示：

這裡父元素的height用了rem，好處是可以很好的貼合3個子元素的高度。

水平居中：flex+justify-content

CSS:

  <style>
        html,
        body {
            height: 100%;
            font-size: 16px
        }
        .child1,
        .child2,
        .child3 {
            background: lightcoral;
            margin: 1rem
        }

        .parent {
           display:flex;
           justify-content: center;
           height:3rem;
           background: lightgreen
        }
    </style>

html:

<div class="parent">
        <div class="child1">demo1</div>
        <div class="child2">demo2</div>
        <div class="child3">demo3</div>
    </div>

瀏覽器顯示：

這裡值得注意的是， 如果你修改父元素的高度，子元素的高度也會一起變化，以滿足子元素在父元素內總是居中：
如果改動父元素的height: 5rem

得到如下顯示結果：

垂直居中：table-cell+vertical-align

css:

  <style>
        html,
        body {
            height: 100%;
            font-size: 16px
        }

        .child1, .child2, .child3{
            background: lightcoral;
        }

        .parent {
            display: table-cell;
            vertical-align: middle;
            background: lightgreen;
            height:10rem;
        }
    </style>

html:

 <div class="parent">
       <div class="child1">demo1</div>
       <div class="child2">demo2</div>
       <div class="child3">demo2</div>
    </div>

瀏覽器顯示：

相容性很好，沒什麼缺點。

垂直居中：table-cell+vertical-align

CSS:

  <style>
        html,
        body {
            height: 100%;
            font-size: 16px
        }

        .child1{
            position: absolute;
            background: lightcoral;
            top:50%;
            transform: translateY(-50%)
        }

        .parent {
            position: relative;
            width:20%;
            background: lightgreen;
            height:10rem;
        }
    </style>

html:

<div class="parent">
      <div class="child1">demo1</div>
    </div>

瀏覽器顯示：

因為用到了css3所以可能有相容性問題，對於多列的垂直居中，參考水平居中的absolute + transform 公式就好。

垂直居中：flex + flex-direction + justify-content

CSS:

<style>
        html,
        body {
            height: 100%;
            font-size: 16px
        }

        .child1{
            background: lightcoral;
            width:50%
        }

        .parent {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: lightgreen;
            width:20%;
            height:10rem;
        }
    </style>

html:

<div class="parent">
      <div class="child1">demo1</div>
      <div class="child1">demo2</div>
      <div class="child1">demo3</div>
    </div>

瀏覽器顯示：

優點是隻需要設定父元素，缺點是CSS3相容性問題。

垂直居中：flex + align+items

CSS:

.parent {
    position:flex;
    align-items:center;
    background: lightgreen;
    width:20%;
    height:10rem;
}

html:

<div class="parent">
      <div class="child1">demo1</div>
</div>

優點是隻需要設定父元素，缺點是CSS3相容性問題，以及只能設定一個子元素。

水平垂直居中：absolute+transform

CSS：

    <style>
        html,
        body {
            height: 100%;
            font-size: 16px
        }

        .child1{
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%, -50%);
            background: lightcoral;
        }

        .parent {
            position: relative;
            background: lightgreen;
            width:20%;
            height:10rem;
        }
    </style>

html:

<div class="parent">
      <div class="child1">demo1</div>
    </div>

瀏覽器顯示：

優缺點相信不用贅述了。 這種方法只能設一個子元素。

水平垂直居中：（inline-block+text-align）+（table-cell+vertical-align）

這其實很好理解 inline-block+text-align 是水平居中用的，able-cell+vertical-align 是垂直居中用的。

對於單個元素的演示過於簡單，就不贅述了，下面展示下多個元素的水平垂直居中：

CSS:

  <style>
        html,
        body {
            height: 100%;
            font-size: 16px
        }

        .child1 {
            display: inline-block;
            background: lightcoral;
        }

        .parent {
            display: table-cell;
            vertical-align: middle;
            background: lightgreen;
            text-align: center;
            width: 50rem;
            height: 10rem;
        }
    </style>

html:

<div class="parent">
        <div class="row">
            <div class="child1">demo1</div>
            <div class="child1">demo2</div>
            <div class="child1">demo3</div>
        </div>
        <div class="row">
            <div class="child1">demo1</div>
            <div class="child1">demo2</div>
            <div class="child1">demo3</div>
        </div>
        <div class="row">
            <div class="child1">demo1</div>
            <div class="child1">demo2</div>
            <div class="child1">demo3</div>
        </div>
    </div>

瀏覽器顯示：

這裡有幾點需要注意的：
1. .row這個元素只是起到換行的作用。
2. 當.parent 設定成 display:table-cell的時候，width進行百分比設定是沒有用的。 所以用rem, 當然直接設px也是可以的。
3. 可以看到同一行的.child1中間是有空白的，可以通過對.child1設定margin:0 -0.11rem 來清除，具體數值是調整出來的。

調整以後效果如下：

優點是相容性好，缺點就是需要設定負的margin值來抵消子元素之間的空白部分。

水平垂直居中：flex+flex-direction+justify-content+align-items

如果我們只需要單個元素水平垂直居中的話，下面這樣就可以了：

<style>
        html,
        body {
            height: 100%;
            font-size: 16px
        }
        .parent {
            display: flex;
            justify-content: center;
            align-items: center;
            background: lightgreen;
            width: 50%;
            height: 10rem;
        }
    </style>

這個很簡單，參照之前flex的水平居中和垂直居中就好了。
假如我們有多個子元素進行二維排列呢。請看下面：
CSS:

  <style>
        html,
        body {
            height: 100%;
            font-size: 16px
        }

        .child1 {
            background: lightcoral;
        }

        .row {
            display: flex;
        }
        .parent {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: lightgreen;
            width: 50%;
            height: 10rem;
        }
    </style>

html:

 <div class="parent">
        <div class="row">
            <div class="child1">demo1</div>
            <div class="child1">demo2</div>
            <div class="child1">demo3</div>
        </div>
        <div class="row">
            <div class="child1">demo1</div>
            <div class="child1">demo2</div>
            <div class="child1">demo3</div>
        </div>
        <div class="row">
            <div class="child1">demo1</div>
            <div class="child1">demo2</div>
            <div class="child1">demo3</div>
        </div>
    </div>

瀏覽器顯示：

我們看到，和之前的佈局比起來有很多優點。

1. 子元素緊緊挨在一起，不需要設定負的margin值去抵消空白部分。
2. 父元素的width可以用百分比設定了。

這裡父元素首先設定了flex-direction:column, 保證 .row子元素是按照豎列排列。 同時兩個center讓 .row水平垂直居中。

如果不對 .row子元素設定 display: flex的話，那麼所有child1元素都都將垂直排列，因為繼承了父元素設的排列方式。設定以後，則child1預設是水平排列。
這樣使得所有child1 在.row的分行中垂直水平居中。

多列布局之定寬+自適應：float + overflow

CSS：

    <style>
        html,
        body {
            height: 100%;
            font-size: 16px
        }
        .left{
            float:left;
            width: 20%;
            margin-right:5%;
            background: lightblue;
        }
        .right {
            overflow: hidden;
            background:lightcoral;
        }
        .parent {
            background: lightcyan;
        }
    </style>

html:

<div class="parent">
      <div class="left">
          <p>left</p>
      </div>
      <div class="right">
          <p>right</p>
          <p>right</p>
      </div>
  </div>

瀏覽器顯示：

如果你不對.right 設定 overflow:hidden

結果顯示出來是這樣：

為什麼用了float就要用overflow:hidden？

因為這牽涉到BFC 概念， 下面的這篇文章我覺得是說得很簡潔明瞭的。

多列布局之定寬+自適應：float + margin

CSS:

   <style>
        html,
        body {
            height: 100%;
             
 

            
  
           

              
              
            
            
相關推薦
			   
            
            
            
 

    

    
    
CSS 佈局解決方案之延伸篇
     
 
							
							
							

然後自己做一點延伸，再把程式碼敲出來，加深下印象。



水平居中：inline-block + text-align

CSS：



 <style>
        .child1 {
            display: inline 

  
 

    

    
    
CSS佈局解決方案
     
  
 
  
  
  
    居中佈局 水平居中  
  
  
  使用inline-block+text-align 
  
  
   原理：先將子框由塊級元素改變為行內塊元素，再通過設定行內塊元素居中以達到水平居中。  
   用法：對子框設定display:inline-block，對父框設定t 

  
 

    

    
    
私有云落地解決方案之網路篇-網路架構
     
 
							
							
							作者：【吳業亮】



網路需求：

1、不同的外網企業使用者訪問虛擬機器時，相互之間不能影響，業務必須隔離。同時，每個虛擬機器業務可使用的頻寬資源也要限制在一定範圍內，避免佔用大量資源。

2、內部網路中的虛擬機器和Portal系統都配置私網地址，要求對外發布 

  
 

    

    
    
私有云落地解決方案之網路篇-關鍵技術-快速重路由FRR
     
 
							
							
							作者：【吳業亮】



場景需求：

網際網路出口分別為RouterB和RouterC，交換機SwitchA採用雙GE鏈路上行至兩臺核心交換機SwitchB和SwitchC，核心交換機SwitchB和SwitchC分別採用雙GE鏈路上行至出口的Router。要求 

  
 

    

    
    
私有云落地解決方案之網路篇-關鍵技術-vlan間通訊
     
 
								
								            
							
							
							

一、華為三層交換機實現不同網段和不同vlan間互通

目標實現：pc1和pc2之間互通

1、拓撲圖 
 
2、三層交換機配置：

<S1>display current-configu 

  
 

    

    
    
CSS常見佈局解決方案
     
 
　　說起css佈局，那麼一定得聊聊盒模型，清除浮動，position，display什麼的，但本篇本不是講這些基礎知識的，而是給出各種佈局的解決方案。

　水平居中佈局
　　首先我們來看看水平居中
　　1.margin + 定寬


?

1
2
3
4
5
6
7
8
9
10



<div
cl 

  
 

    

    
    
Unity資源解決方案之AssetBundle
     
 保留   裝包   方法   bundle   以及   pipe   用法   遊戲   cnblogs   1、什麽是AssetBundle
AssetBundle是Unity pro提供的一種用來存儲資源的文件格式，它可以存儲任意一種Unity引擎能夠識別的資源，如Scene、Mesh、Material 

  
 

    

    
    
angularjs解決方案之  遞歸模板
     
 遞歸模板手風琴模式的菜單：    在項目中我們會遇到不知層級的json數據，需要前端人員去遍歷生成View視圖，這種情況下我們就會用到遞歸方法。    angularjs中的dom結構也是可以用遞歸的方式去循環遍歷數據。<ul side-navigation class="nav metismenu"  

  
 

    

    
    
前端多層回調問題解決方案之$.Deferred
     
 fail   -s   使用   defer   解決方法   ==   默認   don   blog   javascript引擎是單線程的，但是通過異步回調可以實現IO操作並行執行能力，當業務邏輯復雜的時候我們就進入回調地獄。
本文講得ajax是在jquery1.5以前的版本，目的旨在讓我們理解延遲對象 

  
 

    

    
    
ES6 異步編程解決方案 之 Promise 對象
     
 詳解   on()   基本   ack   地獄   down   場景   fill   success   一、Promise 概述

Promise 對象是 ES6 提供的原生的內置對象
Promise 是異步編程的一種解決方案（異步代碼同步化），比傳統的解決方案——回調函數和事件——更合理和更強大
 

  
 

    

    
    
集群環境下定時調度的解決方案之Quartz集群
     
 water   err   eas   ask   res   article   解決問題   class   lis   集群環境可能出現的問題
在上一篇博客我們介紹了如何在自己的項目中從無到有的添加了Quartz定時調度引擎，其實就是一個Quartz 和Spring的整合過程，很容易實現，但是我們現在企 

  
 

    

    
    
GMap.Net解決方案之在WinForm和WPF中使用GMap.Net地圖插件的開發
     
 aac   dem   play   設計實現   成本   這就是   sage   就是   pes          在做地理位置相關的開發時，總是面臨高額地圖引擎費用讓大部分用戶望而卻步，加之地圖數據又是天價，那麽GMap.NET就是首選了，它本身就是開源免費，服務器可以在本地緩存，以後訪問時就可以直 

  
 

    

    
    
Jmeter+jenkins如何快速搭建介面和效能測試持續整合解決方案-[基於windows篇]
     
   
 
  
   
    
    
    Jenkins + Jmeter 構建介面、效能測試持續整合解決方案 
     
     　　Jenkins + Jmeter 可以很輕鬆的進行打包釋出程式後自動進行介面冒煙測試，或者定時效能測試。以下是詳盡的Jenkins + Jmeter  

  
 

    

    
    
Jmeter+jenkins如何快速搭建接口和性能測試持續集成解決方案-[基於windows篇]
     
 pau   解決   fill   containe   lec   配置環境變量   java_home   保存   man    



最近在用Jmeter本來想寫一個詳細的使用教程，突然看到有前輩已經寫好了不錯的教程，特此"借花獻佛"整理出來分享給大家!

Jenkins + Jmete 

  
 

    

    
    
移動前端自適應適配佈局解決方案和比較(實用、贊）
     
  
 
 原文連結：http://caibaojian.com/mobile-responsive-example.html （修飾過） 
 網際網路上的自適應方案到底有幾種呢？就我個人實踐所知，有這麼幾種方案： 
 
  固定一個某些寬度，使用一個模式，加上少許的媒體查詢方案 
  使用flexbox解決方 

  
 

    

    
    
解決方案之網站大資料高併發
     
 大資料處理 
1、資料庫 
垂直拆分：根據業務把表放到不同的資料庫，解決表之間的IO競爭 
水平拆分：根據某種規則把單表資料分成多張表儲存，解決單表資料量大的問題 
索引：根據業務場景建立合理的索引，如果資料量很小建議使用索引（300條以內） 
索引使用場景： 
 
  
   
    動作描述  
    

  
 

    

    
    
終極解決方案之——Centos7由於誤刪或更新python導致 No module named yum
     
 之前由於不懂yum和python之間的關係，因為一直在學python3,看到系統裡/usr/lib下的python2我就直接刪了，結果。。。 
可能還有人是因為python升級的原因，即系統自帶的python2還在，但由於升級導致問題，現在就這兩個原因提出我的解決方案。 
1.由於python升級導致yum無 

  
 

    

    
    
微信小程式——Feed流圖片佈局解決方案
     
  
 
 三種Feed流中的圖片佈局：宮格式佈局、拼圖式佈局、瀑布流式佈局。 
 一、宮格式佈局 
 宮格式佈局也就是九宮格佈局，多用在社交類的APP中，九宮格圖片不僅能放進去很多內容，同時也能很好地引起網友的關注。 
          
 從上面 

  
 

    

    
    
移動端自適應佈局解決方案：rem佈局
     
  
 
       之前寫了一篇rem佈局的文章，今天拿出來發現已經過時了。於是再來寫一遍！ 
        2018.10.24更新 
       首先在html裡面設定一下視口： 
 <meta 

  
 

    

    
    
VUE 專案dependency was not found: * !!vue-style-loader!css-loader? 解決方案
     
  
 
 用npm run dev 執行vue專案時，出現以下錯誤： 
 ERROR  Failed to compile with 1 errors