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

2021-10-08 23:45:32 字數 397 閱讀 8972

一、行內元素:text-align:center

line-height:height

二、塊級元素:

1.給父元素設定display:flex屬性

align-items:center

justify-content:center

2.給父元素設定display:flex屬性,給子元素設定margin:auto

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

4.給父元素設定定位屬性,子元素設定絕對定位,然後給子元素的所有配合屬性都設定為0px;再設定margin:auto

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

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

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

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

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

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