CSS布局对齐方式--水平居中、垂直居中

一、水平居中

情况一：行内元素的水平居中

如果被设置的元素为文本、图片等行内元素时，在父元素 中设置text-align:center实现行内元素水平居中，将子元素的设置为display:inline-block，使子元素变成行内元素；

html

<div class="one">
  <div class="two">11111</div>
 </div>

css

.one{
   text-align: center;
   background-color: grey;
  }
  .two{
   display: inline-block;
   background-color: yellow;
  }

情况二：块状元素水平居中（不定定宽）

因为宽度不一定，所以我们不能通过限制宽度来限制他的弹性。
可以直接给补丁款的块级元素text-align:center;来实现，也可以给父级元素加text-align:center;来实现居中效果。
当不定宽元素的宽度不要占一行时，可以设置display:inline/inline-block（设置为行内元素或者行内块元素）。

display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。

display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。

display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

html

<div class="one">
  <ul>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
  </ul>
 </div>

css

 div{
   text-align: center;
   background-color: beige;
  }
  div ul{
   list-style: none;
   margin: 0;
   padding: 0;
   display: inline-block;
  }
  div ul li{
   margin-right: 8px;
   display: inline-block;
  }

二、垂直居中

/
垂直居中的前提：
父元素是盒子容器且高度已经设定。
/

情况1.子元素是行内元素，高度是由其内容撑开的。

此时需要通过设定父元素的line-height为其高度来使得子元素垂直居中。
html

<div class="one">
   <span class="span">11111</span>
</div>

css

 .span{
  background-color: red;
  }
   .one{
   width: 200px;
   height: 300px;
   line-height: 2000%;
   border:2px solid #ccc;
  }

情况2.子元素是块级元素，但是子元素高度没有设定，在这种情况下，实际上是不知道子元素高度的，无法通过计算得到padding或者margin来调整。

此时，可以通过给父元素设定

display:table-cell; 
                  //让标签元素以表格单元格的形式呈现，使元素类似于td标签
vertical-align:middle;
		 //设置元素内容的垂直对齐方式

来解决。

display:table-cell 指让标签元素以【表格单元格】的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。

verical-align属性：
设置元素内容的垂直对齐方式
只对行内元素span生效，对块状文本样式p、div不起作用。

在本代码中，display:table-cell将块状元素div转化为表格单元格td的形式，就可以用verical-align属性了

html

<div class="one">
  <div class="two">11111</div>
 </div>

css

.two{
   background: green;
  }
  .one{
   width: 200px;
   height: 300px;
   border:2px solid #ccc;
   display: table-cell;
   vertical-align: middle;
  }

情况3.子元素是块状元素且高度已经设定

计算子元素margin-top或margin-bottom，计算方法为（父元素高度-子元素高度）/ 2；
html

<div class="one">
  <div class="two">11111</div>
 </div>

css

.one{
   width: 200px;
   height: 300px;
   border:2px solid #ccc;
  }
  .two{
   width: 100px;
   height: 100px;
   margin-top: 100px;
   background-color: lightblue;
  }

三、水平垂直居中

情况1：水平对齐+行高

text-align + line-height实现单行文本水平垂直居中
html

<div class="one">123</div>

css

.one{
   text-align: center;
   line-height: 100px;
   width: 200px;
   background-color: lightblue;
  }

情况2：水平+垂直对齐

1.在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素。

html

<div class="one">
  <div class="two">123</div>
 </div>

css

.one{
   width: 200px;
   height: 200px;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   background-color: grey;
  }
  .two{
   display: inline-block;
   background-color: red;
  }

text-align：设置元素内文本的水平对齐方式，只对块状区域起作用。可以在图片外部嵌套块状元素< div >< /div >
vertical-align：设置元素内容的垂直对齐方式，只对行内元素span生效，对块状文本样式p、div不起作用

2.若子元素是图像，可不使用table-cell，而是其父元素用行高代替高度，且字体大小设为0。子元素本身设置vertical-align:middle;

html

<div class="one">
  <img class="two" src="wow.jpg"/>
 </div>

css

.one{ 
   text-align: center;
   width: 200px;
   line-height: 100px;
   font-size: 0;
   background-color: grey;
  }
  .two{
   vertical-align: middle;
   width: 50%;
  }