一、垂直居中（< 换成“& lt”不会被转化，>换成“& gt”就不会被转化）

<  !DOCTYPE html   >

<  html lang="en"   >

<  head   >

    <  meta charset="UTF-8"   >

    <  title   &gtTitle<  /title   >

<  /head   >

<   body    >

<  !--position:relative;--   >

<   div style="width: 100%;background: gray;"

   >

    <  div style=" display: table-cell; vertical-align: middle; text-align: center;width: 100%; height: 80px; background: gray; "   >

        <  div style="

width: 400px;

    height: 10px;

    border: 1px solid;

    border-radius: 5px;"   >

            <  div style="

width: 50%;

    height: 10px;

    background: blue;

    border-radius: 5px;"   ><  /div   >

        <  /div   >

    <  /div   >

<  /div   >

<  /body   >

<  /html   >

display: table-cell; 

vertical-align: middle;

同时使用才会有效，因为vertical-align:只对行元素有效；

换种方法依然可以垂直居中对齐

如上，即可垂直居中

二、2维居中

<  !DOCTYPE html   >

<  html lang="en"   >

<  head   >

    <  meta charset="UTF-8"   >

    <  title   &gtTitle<  /title   >

<  /head   >

<  body   >

<  !--position:relative;--   >



1. <  div style=" position: absolute; text-align: center;width: 100%; height: 80px; background: gray; "   >



2. <  div style="position: relative;

    top:50%;

margin: 0 auto;

width: 50%;

margin-top: -5px;

    height: 10px;

    border: 1px solid;

    border-radius: 5px;"   >

        <  div style="

width: 50%;

    height: 10px;

    background: blue;



    border-radius: 5px;"   ><  /div   >

    <  /div   >





<  /div   >





<  /body   >

<  /html   >

如上：将1的div层设置 position: absolute; 将2.div设置 position: relative;top:50%;margin-top: -5px;,这样即可垂直居中；其中margin-top: -5px;是将2.div的自身height，向上margin-top负的一半，即可完美垂直居中，

水平居中需要使用text-align:center;和margin: 0 auto;才会有效；如上1.div text-align:center;2.div,margin: 0 auto;

如上面的代码写即可完成2维居中！