CSS水平 垂直居中方法一覽

2021-07-10 03:55:28 字數 566 閱讀 7196

1、margin:0 auto;

2、position:absolute;left:50%;margin-left:-width/2;

1、父元素設定text-align:center;子元素設定display:inline-block;

2、父元素設定float:left;position:relative;left:50%;子元素設定position:relative;left:50%;

3、將待居中元素放入table單元格td標籤中,設定table的左右margin為auto;

1、將文字line-height設定得和父容器一樣高;

1、將待居中元素放進table單元格td標籤中,並為td設定所需高度即可(td標籤的vertical-align預設為middle);

2、將父元素設定為display:table-cell和vertical-align:middle;(ie6、7不支援)

CSS垂直居中水平居中方法

center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩,以下是大神的解釋 解釋 1 在普通內容流中,margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流,內容流中的其餘部分渲染時絕對定位部分不...

css垂直水平居中方法

1.塊級元素中的行內元素水平居中 給塊級元素設定 text align center 2.塊級元素1中的塊級元素2水平居中 1 給塊級元素2設定 margin 0 auto 2 給塊級元素2設定 display inline block 給塊級元素1中設定 text align center 1.塊...

CSS水平垂直居中方法總結

部分html 如下 div class wrap block div class block center 塊兒居中 div div div class wrap inline span class inline center 內聯居中 span div 一 absolute 二 table inl...