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

實現效果如下：