讓子元素在父元素中水平居中垂直居中的方法

2021-10-04 10:19:34 字數 842 閱讀 4592

方法1：寫乙個偽元素，將它設定為行內塊元素，高度與父元素相同，寫一條屬性，vertical-align:middle,子元素也要寫，具體**如下：



div.zi


div:after


<


/style>


<


/head>


="son"


>


<


/div>


<


/div>
方法2：利用定位，給大的div寫乙個position:relative;子元素寫position:absolute; 這時子元素的包含塊就是外面大的div,然後給裡面的div寫一下位置left:0;right:0;top:0;bottom:0;margin:auto;主要看一下css中的樣式，具體**如下：

div


.son
方法3：這種方法是在前一種方法上的延申，只是不是用margin，而是使用transform：translate()可以在不知道寬高的情況下進行居中，tranlate（）函式是相對於自身的。

具體**如下：

div


.son
方法4：使用彈性盒，給父元素設定這三條屬性display:flex; 水平方向居中 justify-content:center;垂直方向居中align-items:center;具體**如下：

div


.son

如何讓元素在父元素中水平或垂直居中

行內元素 text align center line height height 塊級元素 1.給父元素設定display flex 並且設定 align items centerjustify content center 2.給父元素乙個定位屬性，子元素使用絕對定位，並且使用配合屬性left ...

讓子元素在父元素內垂直水平居中的方法

首先，我們先建立乙個父盒子和乙個子盒子，然後讓子盒子在父盒子內部水平垂直都居中 container box 1.最方便的彈性盒子通過設定父元素盒子一下三個屬性，就可以快速方便地使子元素盒子水平垂直居中，並且不需要計算 display flex justify content center align...

css讓元素水平垂直居中

利用flex布局 無需知道被居中元素的寬高 container利用absolute transform 無需知道被居中元素的寬高 設定父元素非 static 定位 container 子元素絕對定位，使用 translate的好處是無需知道子元素的寬高 如果知道寬高，也可以使用 margin 設定 ...