CSS中常見的水平垂直居中的實作方法有哪些？ CSS中三種常見的水平垂直居中

這篇文章要跟大家介紹的內容是關於CSS中常見的水平垂直居中的實作方法有哪些？ CSS中三種常見的水平垂直居中，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

當不知道子元素的寬和高的時候，如何實現子元素的水平垂直居中，這裡總結了幾種方法：

#1、利用定位和transform實現

HTML和CSS程式碼如下：

<div class="super-div">
        <div class="sub-div">利用定位和transform
            <br/>实现水平垂直居中</div>
</div>
 
 .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .sub-div {
            background-color: green;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* top left 分别相对于父元素的高度和宽度，translate相对于自身的宽度和高度 */
        }

     這種實作方式的核心在於註解部分，相對定位的時候，top和left都是相對於父元素的高度和寬度計算，而transform是相對與自身寬高計算；  效果如下：

2、利用table-cell佈局實作

HTML與CSS程式碼實作如下：

     <div class="super-div table">
        <div class="table-cell">利用table-cell
            <br/>实现水平垂直居中</div>
    </div> 
 
 
   .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
   .table {
            display: table;
        }
 
   .table-cell {
            display: table-cell;
            /*垂直居中*/
            vertical-align: middle;
            /*水平居中*/
            text-align: center;
            background-color: green;
        }

父元素設定table佈局，子元素設定為table-cell佈局。然後實作子元素的垂直水平居中，效果如下：

3、利用flex佈局實作

HTML和CSS程式碼如下：

<div class="super-div flex">
        <div class="flex-center">利用flex布局
            <br/>实现水平垂直居中</div>
</div> 
 
.super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .flex {
            display: flex;
            /*flex布局*/
            justify-content: center;
            /*使子项目水平居中*/
            align-items: center;
            /*使子项目垂直居中*/
        }
 
 .flex-center {
            background-color: green;
        }

實作效果如下：

相關文章推薦：

CSS中table表格的兩個使用方法（實例）

多列佈局的概念是什麼？ CSS多列佈局的應用（實例程式碼）

以上是CSS中常見的水平垂直居中的實作方法有哪些？ CSS中三種常見的水平垂直居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！