css-元素居中

本文重要是彙總了關於水平居中，垂直居中，還有水平垂直居中的各類方法。

1、水平居中

1.行內元素水平居中

使用text-align:center;屬性能夠實如今行內元素（包括：inline,inline-block、inline-table、inline-flex）在塊級父元素水平居中。

css樣式:

<style>
    .parent{
        text-align: center;
        border: 1px solid  rebeccapurple;
    }
    .inlineTable{
        display: inline-table;
    }
    .inlineflex{
        display: inline-flex;
    }
</style>

html結構：

<div class="parent">
    <span>我是inline</span>
</div>
<div class="parent">
    <p>我是inline-block</p>
</div>
<div class="parent">
     <div class="inlineTable">我是inline-table</div>
</div>
<div class="parent">
     <div class="inlineflex">我是inline-flex</div>
</div>

2.塊級元素水平居中

塊級元素水平居中的方法有不少，下面會一一列舉：

a.將元素的左右外邊距設置爲auto。

cssy樣式：

.child{
        margin: 0 auto;
  }

b.使用absolute+transdorm

父元素相對定位，子元素絕對定位 left:50%，而後向左移動子元素通常的寬度達到水平居中。

css樣式：

<style>
  .child {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  .parent {
    position:relative;
  }
</style>

html結構：

<div class="parent">
  <div class="child">使用absolute+transdorm</div>
</div>

c.使用flex+justify-content
css3的flex佈局具備兼容性問題，使用需謹慎。

css樣式：

<style>
  .parent {
    display: flex;
    justify-content:center;
  }
</style>

html結構：

<div class="parent">
  <div class="child">flex+justify-content</div>
</div>

d.使用flex+margin
父元素設爲flex佈局，在設置子元素居中

css樣式：

<style>
  .parent {
    display: flex;
  }
  .child {
    margin:0 auto;
  }
</style>

html結構

<div class="parent">
  <div class="child">flex+margin</div>
</div>

3.多個塊級元素水平居中

html結構：

<div class="parent">
    <div class="chlid">多級塊元素水平居中</div>
    <div class="chlid">多級塊元素水平居中</div>
    <div class="chlid">多級塊元素水平居中</div>
</div>

公用樣式

.parent{
        border: 1px solid rosybrown;
    }
   .chlid{
       width: 50px;
       background: papayawhip;
       margin-right: 10px;
   }

css樣式1——flex佈局

<style>
    .parent{
        display: flex;
        justify-content: center;
    }
</style>

css樣式2-inline-block + text-align: center

<style>
    .parent{
        text-align: center;
    }
   .chlid{
       display: inline-block;
   }
</style>

4.浮動元素水平居中

公用html結構：

<div class="parent">
   <span class="child">須要居中的子元素</span>    
</div>

• 1.定寬浮動元素，經過relative+margin

css樣式：

<style>
    .child {
        float: left;
        width: 500px;
        position: relative;
        left: 50%;
        margin-left: -250px;
        text-align: center;
    }
</style>

• 2.不定寬，父子元素設置相對定位

css樣式：

<style>
    .parent {
        float: left;
        position: relative;
        left: 50%;
    }

    .child {
        float: left;
        position: relative;
        right: 50%;
    }
</style>

• 3.利用flex佈局（通用無論定寬仍是不定寬）

<style>
    .parent {
        display: flex;
        justify-content: center;
    }

    .chlid {
        float: left;
    }
</style>

5.絕對定位元素水平居中

<div class="parent">
    <div class="child">讓絕對定位的元素水平居中對齊。</div>
  </div>
  .parent{
        position:relative;
    }
   .child{
         position: absolute; /*絕對定位*/
         width: 200px;
         height:100px;
         background: yellow;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此處不能省略，且爲0*/
         right: 0;/*此處不能省略，且爲0*/
    }

2、垂直居中

1. 單行內聯元素垂直居中

<div class="parent">
     <span>單行內聯元素垂直居中。</span>。
</div>
<style>
  .parent {
    height: 120px;
    line-height: 120px;
   }
</style>

2.多行內聯元素垂直居中

a.利用flex佈局（flex）

<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.</p>
    <p>Dance like nobody is watching, code like everybody is.</p>
    <p>Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
 .parent {
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }    
< /style>

b.利用表佈局（table）

<style>
.parent {
    display: table;
    height: 140px;
    border: 2px dashed #f69c55;
}
.child {
    display: table-cell;
    vertical-align: middle;
}
</style>

3.塊級元素垂直居中

公共html結構
<div class="parent">
    <div class="child">塊級元素垂直居中。</div>
</div>

a.使用absolute+負margin(已知高度寬度)

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

b.使用absolute+transform

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

c.使用flex+align-items

.parent {
    display:flex;
    align-items:center;
}

d.使用table-cell+vertical-align

.parent {
    display: table-cell;
    vertical-align: middle;
  }

3、水平垂直居中

公共html結構
<div class="parent">
    <div class="child"  style="width: 100px;height: 100px;background-color: #666">>塊級元素垂直居中。</div>
</div>

方法一：絕對定位與負邊距實現（已知高度寬度）

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

方法二：絕對定位與margin:auto （已知高度寬度）

.parent {
   position: relative;
   height:200px;//必須有個高度
}
.child {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;//注意此處的寫法
}

方法三：絕對定位+CSS3(未知元素的高寬)

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

方法四：flex佈局

.parent {
   height:200px;//必須有高度
   display: flex;
   justify-content: center;
   align-items: center;
 }

方法五：flex/grid與margin:auto

.parent {
  height:200px;//必須有高度
  display: grid;
}
.child {
  margin: auto;
}