css中垂直水平居中的實作方法總結（附程式碼）

這篇文章帶給大家的內容是關於css中垂直水平居中的實現方法總結（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

最近看到很多面試題目會問：請說出幾種使用css完成垂直水平居中的方法？剛好看css基礎的時候看到一篇文章是講完全居中的，這邊對於文章中的內容做個小結

一、使用absolute(Absolute Centering)

#1.1 具體程式碼如下：

.container {
    position: relative;
}

.absolute_center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    margin: auto;
    padding: 20px;
    overflow: auto;
}

<div>
    <div>
        <ul>
            <li>
                该方法的核心思想是是使用绝对定位布局，使当前元素脱离正常的流体特性，而使用absolute的流体特性
            </li>
        </ul>
    </div>
</div>

#1.2 此方法的核心概念是：

使用absolute進行定位佈局，脫離正常的塊狀元素流體特性，而透過absolute的流體特性完成垂直水平居中。

這裡有兩個基本知識點需要知道：

1.流體特性：
塊狀水平元素，如div元素，在默認情況下（非浮動、絕對定位等），水平方向會自動填滿外部的容器；如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等等，實際內容區域會響應變窄；
2.absolute流體特性：
預設是不具有流體特性的，而是在特定條件下才具有，而這個條件就是"對立方向同時發生定位的時候"，即left與right為水平方向定位，top與bottom為垂直方向定位，而當對立方向同時具有定位數值的時候，absolute的流體特性就發生了。

1.3 優缺點：

#優點：

1.相容性好，absolute流體特性IE7就相容了，可相容於所有現代瀏覽器；
2.沒有額外的標記html元素，樣式簡單；
3.內容的寬度以及高度寫法支援使用百分比以及min-/max-寫法；
4.對圖像檔案也同樣支援；

缺點：

1.必須定義內容的高度；
2.必須增加overflow屬性來阻止如果內容的文字高度超出外層容器時出現的溢出情況；

二、負值外補洞法(negative margins)

這可能是目前最常用的方法，在元素的高度以及寬度是固定數值的時候，透過設定該元素為相對佈局脫離文檔流，並設定top: 50%; left: 50%;，使用margin-left以及margin-top使元素完全居中。

2.1 具體程式碼如下：

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.is-Negative {
    position: absolute;
    width: 300px;
    height: 200px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -170px;
    margin-top: -120px;
    background-color: cornsilk;
}

<div>
    <div>
    </div>
</div>

2.2 此方法的核心思想是：

使用相對佈局，並使用top以及left使內容置於容器中心部位，再使用margin來控制偏移量。

這裡有有個注意點：

當使用box-sizing:border-box屬性的時候，偏移量是不需要計算border以及padding的。

2.3 優缺點：

優點：

1.相容性好，包括IE6-IE7
2.沒有額外的標記html元素，程式碼量少；

缺點：

1.非響應式的，不能配合百分比以及min-/max-使用；
2.必須增加overflow屬性來阻止如果內容的文字高度超出外層容器時出現的溢出情況；
3.當元素使用box-sizing:border-box和使用預設的content-box偏移量是不一樣的，需要重新計算;

三、使用Transforms

3.1 具體程式碼如下：

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.is-Transformed { 
    width: 50%;
    margin: auto;
    position: absolute;
    top: 50%; 
    left: 50%;
    padding: 20px;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    background-color: darkseagreen;
}

<div>
    <div>
        <ul>
            <li>
                该方法的核心思想是使用相对布局，并使用top以及left使内容置于容器中心部位，再使用translate来控制偏移量
            </li>
        </ul>
    </div>
</div>

##3.2 這個方法的核心思想是：

使用相對佈局，並使用top以及left使內容置於容器中心部位，再使用transform來控制偏移量。

3.3 優缺點：

優點：

1.內容寬度以及高度自適應，可以不指定內容的寬度以及高度;

2.程式碼量少

缺點：

#1.相容性差了點，由於transform不相容IE8,所以只支援IE9及其以上的現代瀏覽器；
2.為了相容於各種瀏覽器，需要一些額外的css前綴；

3.如果元素有使用transform屬性，可能會影響到其他的變換效果；

4.在有些時候會出現邊緣模糊的情況，這是瀏覽器渲染的問題，尤其是使用了transform-style: preserve-3d屬性的時候##四、使用Table-Cell

##這可能是最好的垂直居中的方案，但存在一個最大的問題，需要額外的html元素，要使用table-cell完成垂直居中效果需要3個元素來完成。

4.1 具體程式碼如下：

#

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Table { 
  display: table; 
}

.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}

.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
  padding: 20px;
  background-color: deepskyblue;
}

<div>
    <div>
        <div>
            使用table-cell完成垂直水平居中
        </div>
    </div>
</div>

@import "./absolute_center4.png"{width="50%"}

4.2 该方法的核心思想是：

使用表格来实现垂直居中，再使用margin: 0 auto;来实现水平居中。

具体操作步骤如下：

1.设置父元素为块级表格；
2.设置子元素为表格单元格；
3.给子元素添加vertical-align:middle属性,此单元格已实现垂直居中；
4.设置子元素中的内容的宽度，添加margin: 0 auto;属性，使子元素水平居中。

4.3 优缺点：

优点：

1.内容高度自适应；
2.如果子元素的内容溢出，会拉伸父元素的高度；
3.兼容性好，兼容到IE8；

缺点：

1.完成一个垂直居中效果，需要3个html元素；

五、使用Inline-block

这也是一种常用的垂直水平居中的方法，但会存在一个问题：当内容的宽度大于容器宽度-0.25em的时候，会发生内容上移到顶部的方法，所以需要一些小的技巧来避免这样的问题。

5.1 具体代码如下：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  background-color: greenyellow;
  padding: 20px;
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

<div>
    <div>
        使用inline-block完成水平垂直居中
    </div>
</div>

5.2 该方法的核心思想是：

和table有点类似，设置内容为inline-block块，设置vertical-align: middle;属性使元素垂直方向居中，再父容器设置text-align:center;使子元素水平方向居中；

5.3 优缺点：

优：

1、内容高度自适应；
2.如果子元素的内容溢出，会拉伸父元素的高度；
3.兼容性好，兼容到IE7；

缺：

1.依赖margin-left：-0.25em来矫正水平方向居中的误差；
2.内容的宽度必须小于容器的宽度减去0.25em。

六、使用Flexbox

弹性布局是当前移动端比较流行的布局方式，它可以很优雅的完成垂直水平居中效果。

6.1 具体代码如下：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

.center_block {
  background-color: wheat;
  padding: 20px;
}

<div>
  <div>
    使用flexbox完成水平垂直居中
  </div>
</div>

6.2 该方法的核心思想是：

使用弹性布局，align-items: center;使元素在侧轴方向居中（默认是垂直方向），justify-content: center;使元素在主轴方向居中（默认是水平方向）;

6.3 优缺点：

优：

1.内容宽度、高度自适应,即便文本溢出也很优雅；
2.可以使用很多弹性布局的新特性；

缺：

1.兼容性比较差，目前只有IE10以上兼容；
2.需要写额外的兼容性前缀；
3.各个浏览器的表现可能会有一些差异；

以上是css中垂直水平居中的實作方法總結（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！