CSS 各種居中方式

CSS里有很多種居中的方式，自己整理了一些常見的居中方式

 

水平居中

 

• 行內元素水平居中

給行內元素的父級加 text-align:center;

.container{
    text-align:center;
}

 

 

• 已知塊級元素的寬水平居中

設置左右marign的值為auto

.container{
    width:600px;
    margin:0 auto;
}

 

 

垂直居中

 

• 行內元素設置行高和父級高度一樣

行內的line-height的值和父級的高度相等就可以垂直居中

.container{
  height:200px;
  border:1px solid #000;
  text-align:center;
}

.center{
  line-height:200px;
}

 

 

• 不知道父級的高度垂直居中

將上下padding的值相等

.container{
  border:1px solid #000;
  text-align:center;
}

.center{
  display:inline-blcok;
  padding:20px 0;
}

 

 

• display:table-cell

設置display的值為table-cell，將元素變為表格cell顯示

.container{
  border:1px solid #000;
  width:600px;
  height:800px;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

 

 

• 添加偽元素實現居中

這個方法比較特別

.container{
  border:1px solid #000;
  width:600px;
  height:800px;
  text-align:center;
}

.container::before{
  width:0;
  height:800px;
  content:'';
  display:inline-block;
  vertical-align:middle;
}

 

 

水平垂直居中

• 絕對定位

父元素 postion 為 relative 子元素 position 為absolute ，用 transform 屬性居中

.container{
  position:relative;
  width:800px;
  height:800px;
  border:1px solid #000;
}

.center{
  position:absolute;
  border:1px solid #000;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}

 

 

• 用flex布局

目前的主流方式，非常好用，建議用這種

.container{
  width:800px;
  height:800px;
  border:1px solid #000;
  display:flex;
  align-items: center;
  justify-content: center;
}

.center{
  width:100px;
  height:100px;
  border:1px solid #000;
}

 

 

• grid布局

較新的方法，所以有兼容問題，未來會越來越常使用

.container{
  width:800px;
  height:800px;
  border:1px solid #000;
  display: grid;
  align-items: center;
  justify-content: center;
}

.center{
  width:100px;
  height:100px;
  border:1px solid #000;
}