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;

 

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