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

2021-10-18 19:48:15 字數 1146 閱讀 7437

首先，我們先建立乙個父盒子和乙個子盒子，然後讓子盒子在父盒子內部水平垂直都居中

"container">


"box">
1.最方便的彈性盒子通過設定父元素盒子一下三個屬性，就可以快速方便地使子元素盒子水平垂直居中，並且不需要計算：

display: flex;

justify-content: center;

align-items: center;

完整css**如下：

.container


.box
2.功能強大的定位通過定位，子元素四周的定位值皆為0且margin設定為auto，即可實現子元素盒子水平垂直居中，同樣不需要計算。完整css**如下：

.container


.box
3.通過定位和margin值來實現居中定位通過定位left和top值，並計算和調整margin值來實現子元素盒子水平垂直居中。完整css**如下：

.container


.box
當然也可以用transform:tranlate(-50%,-50%)來實現，這裡的意思是往上（x軸）,左（y軸）移動自身長寬的 50%。因為原理相同，所以放在了一起。完整css**如下：

.container


.box
4.通過transform平移變換來實現居中定位通過分別計算和設定transform：translate的x軸和y軸的值來實現子元素盒子水平垂直居中。完整css**如下：

.container


.box
5.通過inline-block來實現居中定位以下是其完整**：

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

方法1 寫乙個偽元素，將它設定為行內塊元素，高度與父元素相同，寫一條屬性，vertical align middle,子元素也要寫，具體 如下 div.zi div after style head son div div 方法2 利用定位，給大的div寫乙個position relative 子元...

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

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

子元素浮動後，在父元素內垂直不居中

class header span 同住人span class header button 刪除button header 給button設定右浮動 header button 結果 如何解決？給需要浮動的子元素加父元素，然後讓父元素浮動 class header span 同住人span clas...