水平居中布局

含义:指当前元素在父级元素容器中，水平方向是居中显示的;

1.文本/行内元素I行内块级元素:

原理: text-align只 控制行内内容(文字、行内元素、行内块级元素)如何相对他的块父元素对齐。

  1. <!--定义父级元素--> 
  2. <div id="parent">
  3.     <!--定义子级元素-->
  4.     <div id="child">水 平居中布局</div>
  5. </div>

通过以下CSS样式代码实现水平居中

  1. #parent{ text-align: center; }

优点

简单快捷，容易理解，兼容性非常好;

缺点

只对行内内容有效:属性会继承影响到后代行内内容;如果子元素宽度大于父元素宽度则无效，只有后代行内内容中宽度小于设置text-align属性的元素宽度的时候，才会水平居中;

2 单个块级元素:

原理:在margin有节余的同时如果左右margin设置了auto，将会均分剩余空间。另外，如果上下 的margin设置了auto，其计算值为0;

  1. <!-- 定义父级元素-->
  2. 实现效果图:
  3. <div id="parent" >
  4. <!--定义子级元素-->
  5.     <div id="child">水平居中布局</div>
  6. </div>

通过以下CSS样式代码实现水平居中

  1. #son {
  2.     width: 100px; /*必须定宽*/
  3. }

优点:

简单;兼容性好;

缺点:

必须定宽，并且值不能为auto;宽度要小于父元素，否则无效;

3.多个块级元素:

原理: text-align只 控制行内内容(文字、行内元素、行内块级元素)如何相对他的块父元素对齐。

<!--定义父级元素-->
<div id="parent">
    <!--定义子级元素-->
    <div id="child">水平居中布局</div>
</div>

通过以下CSS样式代码实现水平居中

parent{
    text-align: center;
}
.son{
    display: inline-block;
    /*改为行内或者行内块级形式，以达到text-align对其生效*/
}

优点:

简单，容易理解，兼容性非常好;

缺点:

只对行内内容有效;属性会继承影响到后代行内内容;块级改为inline-block换行、空格会产生元素间隔;

4 使用绝对定位实现:

原理:子绝(绝对定位)父相(相对定位)，top、 right、 bottom、 left的值 是相对于父元素尺寸的,然后margin或者transform是相对于自身尺寸的，组合使用达到水平居中的目的;

<!--定义父级元素-->
<div id="parent">
  <!--定义子级元素-->
  <div id="child">水 平居中布局</div>
</div>

通过以下CSS样式代码实现水平居中

#parent{
    position: relative; /*子相*/
}
#son{
  position: absolute; /* 子绝*/
  left: 50%; /* 等同于 margin-left: -50px; */
  translatex(-50x);
}

优点:

使用margin-left兼容 性好;不管是块级还是行内元素都可以实现;

缺点:

代码较多;脱离文档流;使用margin-left需要知道宽度值:使用transform兼容性不好(ie9+);

5 任意个元素(flex)

原理:设置当前主轴对齐方式为居中。

<!--定义父级元素-->
<div id="parent">
  <!--定义子级元素-->
  <div id="child">水 平居中布局</div>
</div>

通过以下CSS样式代码实现水平居中

#parent{
  display: flex;
  justify-content: center;
}

优点:

功能强大;简单方便;容易理解;

缺点:

PC端兼容性不好，移动端(Android4. 0+)

垂直居中布局

含义:指当前元素在父级元素容器中，垂直方向是居中显示的;

1. 单行文本/行内元素/行内块级元素:

原理: line-height的最终表现是通过inline box实现的，而无论inline box所占据的高度是多少(无论比文字大还是比文字小)，其占据的空间都是与文字内容公用水平中垂线的。

<!--定义父级元素--> 
<div id="parent" >
<!--定义子级元素-->
    <div id="child">水平居中布局</div>
</div>

通过以下CSS样式代码实现水平居中

#parent{
    height: 150px;
    /*.与height等值*/
  line-height: 150px;
}

优点:

简单;兼容性好

缺点:

只能用于单行行内内容;要知道高度的值;

2.图片垂直居中:

原理: vertical-align和line-height的基友关系。

<!--定义父级元素-->
<div id="parent">
  <!--定义子级元素-->
  <div id="child">水平居中布局</div>
</div>

通过以下CSS样式代码实现水平居中

#parent{
  height: 150px;
  line-height 150px;
  font-size: 0;
}
/*默认是基线对齐，改为middle*/
img#child{vertical-align: middle;}

优点:

简单;兼容性好

缺点:

需要添加font-size: 0;才可以完全的垂直居中;不过需要主要，html#parent包 裹img之间需要有换行或空格;

3.单个块级元素:

3-1.使用tabel-cell实现:

原理:CSS Table， 使表格内容对齐方式为middle。

<!--定义父级元素-->
<div id= "parent" >
  <!--定义子级元素-->
  <div id="child">水平居中布局</div>
</div>

通过以下CSS样式代码实现水平居中

#parent{
  display: table-cell;
  vertical-align: middle;
}

优点:
简单;宽高不定:兼容性好(ie8+)
缺点:
设置tabl-cell的元素， 宽度和高度的值设置百分比无效，需要给它的父元素设置display: table;才生效; table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height;设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性;内容溢出时会自动撑开父元素;

3-2.使用绝对定位实现:

原理:子绝父相，top、 right、 bottom、 left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到水平居中的目的。

<!-- 定义父级元素-->
<div id="parent">
<!--定义子级元素-->
  <div id="child">水平居中布局</div>
</div>

#parent(
    position: relative; /*父相*/
}
#child{
  position: absolute; /*子他*/
  top: 50%;
  /*自身高度-不,这里等月于margin-top:-25px;*/
  transform: translate(-50%);
  height: 50px;
}

/

#parent{ position: relative; }
#child{
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  height: 50px;
}

优点:
使用margin-top兼容性好;不管是块级还是行内元素都可以实现
缺点:
代码较多;脱离文档流;使用margin-top需要知道高度值:使用transform兼容性不好(ie9+ )

3.3 使用flex实现:

原理: flex设置对齐方式。

<!--定义父级元素-->
<div id="parent">
  <!-- 定义子级元素-->
  <div id="child">水平居中布局</div>
</div>

通过以下CSS样式代码实现水平居中

#parent{
  display: flex;
  align-items: center;
}

优点:

功能强大;简单方便;容易理解;

缺点:

PC端兼容性不好，移动端(Android4. 0+)

水平垂直居中布局

含义:指当前元素在父级元素容器中，水平垂直方向都是居中显示的;

1.利用table-cell実現:

原理:CSSTable,使表格内容垂直対斉方式内middle,突現垂直居中;然后根据是行内内容丕是

块级内容采取不同的方式到水平居中。

<!--定乂父級元素-->
<div id="parent" >
  <!-- 定文子級元素-->
  <div id="child">水 平居中布局</div>
</div>

#parent{
    display: table-cell;
    vertical-align: middle;
    /* text-align: center; */ /*如果是行内元素就添加过 */
}
#child{
  display: table;
  margin: 0 auto;
  /*如果是快綬元素就添加过*/
}

优点:
    简单;适用于宽度高度未知情况;兼容性好(ie8+)
缺点: 
    vertical-align属性 具有继承性，导致父元素的文本也是居中显示的;

2.定位position实现:

原理:子绝父相，top、 right、 bottom、 left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到几何上的水平垂直居中。

<!--定义父级元素-->
<div id="parent">
    <!--定义子级元素-->
    <div id="child">水 平居中布局</div>
</div>

通过以下CSS样式代码实现水平居中

#parent{position: relative;}
#child{
  position: absolute;
  top: 50%;
  left: 50%;
    /*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/
    transform: translate(-50%, -50%);
}

优点:
    使用margin兼容性好;不管是块级还是行内元素都可以实现
缺点:
    代码较多;脱离文档流;使用margin需要知道宽高;使用transform兼容性不好(ie9+) ;

3. 利用flex实现:

原理: flex设置对齐方式。

<!--定义父级元素-->
<div id= "parent">
  <!--定义子级元素-->
  <div id="child">水 平居中布局</div>
</div>

通过以下CSS样式代码实现水平居中

#parent{
  display: flex;
  justify-content: center;
  align-items: center;
}