1. 程式人生 > >css佈局之居中

css佈局之居中

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%);
}

水平垂直居中

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