垂直居中

(1)margin:auto法

css:
div{
  width: 400px;
  height: 400px;
  position: relative;
  border: 1px solid #465468;
 }
 img{
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }
html:
<div>
 <img src="mm.jpg">
</div>

定位為上下左右為0务嫡，margin：0可以實現(xiàn)脫離文檔流的居中.

(2)margin負值法

.container{
  width: 500px;
  height: 400px;
  border: 2px solid #379;
  position: relative;
}
.inner{
  width: 480px;
  height: 380px;
  background-color: #746;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -190px; /*height的一半*/
  margin-left: -240px; /*width的一半*/
 }

補充：其實這里也可以將marin-top和margin-left負值替換成猖辫，
transform：translateX(-50%)和transform：translateY(-50%)

(3)table-cell（未脫離文檔流的）

設(shè)置父元素的display:table-cell,并且vertical-align:middle蛇损，這樣子元素可以實現(xiàn)垂直居中源内。
css:
div{
    width: 300px;
    height: 300px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}

(4)利用flex
將父元素設(shè)置為display:flex茎刚，并且設(shè)置align-items:center;justify-content:center;

css:
.container{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
 }
 .inner{
      border: 3px solid #458761;
      padding: 20px;
 }

5她肯，inline 元素可設(shè)置line-height的值等于height值了牛，如單行文字垂直居中：

.container {
   height: 50px;
   line-height: 50px;
}

水平居中

1，inline 元素用text-align: center;即可欧募，如下：

.container {
   text-align: center;
}

2压状，block 元素可使用margin: auto;，PC 時代的很多網(wǎng)站都這么搞跟继。

.container {
    text-align: center; 
}
.item {
    width: 1000px;
    margin: auto; 
}

3种冬，絕對定位元素可結(jié)合left和margin實現(xiàn)，但是必須知道寬度舔糖。

.container {
    position: relative;
    width: 500px;
}
.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin: -150px;
}