CSS布局之居中

本文主要是介紹水平居中，垂直居中，還有水平垂直居中的方法

水平居中

1.行內元素水平居中 使用text-align:center;就可以實現行內元素的水平居中，但是記得要在父元素中設置，會對子元素生效。此方法對，inline、inline-block、inline-table、inline-flex都有效。

.box{
  text-align:center;
}

此外，如果塊級元素包着一個塊級元素，那么我們可以設置外部盒子text-align:center;給內部盒子設置display:inline-block;這樣也可以使得內部元素居中。但要注意的是，內部盒子已經設置了display:inline-block，就不可以再設置其他的display，所以最好不要使用這種方法。

<div class="parent">
  <div class="child">
  </div>
</div>
<style>
  .parent{
  text-align:center;
  }
  .child{
  display:inline-block
  }
</style>

 

2.塊級元素水平居中

使用margin居中

margin：0 auto;但是使用這種方法，要記得給元素設置寬度，否則不會生效

使用absolute+transform

absolute定位，左 50%，然后使用transform向左移動50%；

3.浮動元素水平居中

• 已知寬度，通過子元素設置relative+負margin　　

.child{
  width:200px;
  float:left;
  position:relative;
  left:50%;
  margin:-100px;
}

• 未知寬度，父子元素都用相對定位

  .parent{
    float:left;
    postion:relative;
    left:50%;
  }
  .child{
    float:left;
    position:relative;
    right:50%;
  }

  父元素相對於左定位50%；且因為，父元素的寬度是由子元素撐起來的，所以當子元素相對於自身右定位50%時，水平居中

  示例 當我們把child的定位取消時

   

  打開child的相對定位時

   

  4.絕對定位元素水平居中 這種方式通過子元素的絕對定位，外加margin:0 auto;

  .parent{
    position:relative;
  }
  .child{
    postion:absolute;
    width:100px;
    height:100px;
    background:red;
    margin:0 auto;
    left:0;
    right:0;
  }

垂直居中

1.單行內聯元素垂直居中 這種方法適合對單行文本的垂直居中，比如應用在頂部菜單欄中

.parent{
  height:100px;
  line-height:100px;
}

2.塊級元素垂直居中

使用absolute+負margin

.parent{
  position:relative;
}
.child{
  height:100px;
  position:absolute;
  top:50%;
  margin-top:-50px;
}

使用absolute+tranform

.parent{
  position:relative;
}
.child{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

水平垂直居中

可以參考上面的水平居中和垂直居中的方法，結合起來就可以了。