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

2021-10-09 02:31:35 字數 397 閱讀 2535

行內元素:

text-align:center;

line-height:height;

塊級元素:

1.給父元素設定display:flex;並且設定:align-items:centerjustify-content:center;

2.給父元素乙個定位屬性,子元素使用絕對定位,並且使用配合屬性left:50%;top:50%;讓子元素左上角移動到父元素中心位置;然後再讓子元素使用margin-left:-width/2;margin-top:-height/2;

3.給父元素乙個定位屬性,給子元素乙個絕對定位。然後給子元素的所有配合屬性設定為0px並且給子元素設定margin:auto;

4.給父元素設定乙個display:flex;子元素設定margin:auto;

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

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

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

一 行內元素 text align center line height height 二 塊級元素 1.給父元素設定display flex屬性 align items center justify content center 2.給父元素設定display flex屬性,給子元素設定margi...

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

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