H5樣式與布局 --常用居中方法

近日清閑，決定用博客來總結下入行一年多來零零散散記錄在小本本上的知識點。

先看布局

1.常用居中方法

我們假設DOM文檔結構如下，子元素要在父元素中居中：

<div class="parent">
    <div class="child">
    　　<span>啦啦啦</span>
    　　<p>我要居中</p>
　　</div>
</div>

水平居中

實現水平居中的前提是父元素有一個寬度，沒有設置的話，默認為上一級的寬度。

子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。下面進行分析：

1.行內元素&&不定寬塊狀元素：對父元素設置text-align:center;

2.定寬塊狀元素： 設置左右margin值為auto; (自身有寬度margin才有效)

3.通用方案: flex布局，對父元素設置display:flex;justify-content:center;

垂直居中

實現垂直居中的父元素有定高或被子元素撐開高度。

子元素類型不同，采取的布局方案不同。下面進行分析：

1.子元素單行文本垂直居中：設置父元素的height等於行高line-height

　　以上文本不管是由塊標簽還是內聯標簽包裹的，都一樣。

　　有一種很常見的圖標加文字一起居中的布局待以后展開說。

2.子元素為定高的塊元素：

　1) .父元素 height:xx; position: relative; 子元素 position: absolute; top: 50%; height: XX; margin-top: -XX/2;

    2) .父元素 height:xx; position: relative; 子元素 position: absolute; top: 0; buttom: 0; margin: auto; height: XX;

    3) .外插div設置清浮動，代碼如下：

<div id="parent">                    
    <div id="floater"></div>
    <div id="child">xxx</div>
</div>
#parent {height: 250px;}
#floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}
#child {
    clear: both;
    height: 100px;
}

3.通用方案(子元素為不定高的任何元素)

    1) .設置父元素 height:xx;display:table-cell;vertical-align:middle;

    2) .flex布局，給父元素設置 height:xx; display:flex; align-items:center;

    3) . 父元素不設高，子元素設 padding: xx 0;

 

以上是本人目前了解的，若有看客，望不吝拍磚。