幾種可以讓元素水平垂直居中的方法

2021-08-09 14:53:18 字數 656 閱讀 6104

1.負margin法:這是比較常用的方法,在知道元素的寬高的前提下才能使用

#a

注:負margin是個非常有意思的用法,深入了解後會發現他在布局上相當有用。

優點:**量少,相容性好。

缺點:非響應式方法,內容可能會超出容器。

2.transform法:

#a

優點:**量少;寬高可變,相應式布局

缺點:不支援ie8,可能需要帶**商字首

3.flexbox法

.vertical-container 

.a

注:flexbox的用法遠不止如此,在布局上還有很多有趣的用法。

#a

優點:**量少,相容性好

css讓元素水平垂直居中

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

用css讓元素水平垂直居中幾種方法

針對小白和小白面試人群首先說一些題外話,那就說一下博主大四上半年去一家公司面試的尷尬事吧。哈哈 我記得那是我第一次列印簡歷正式面試的第一家,那個哥可以說很面善,人狠話不多,面對著自信滿滿 渣到爆 的我,第乙個問題問我行元素塊元素的區別,我一想,這個我會啊,可是以我當時的想法我只能舉例子啊,那就說p是...

元素水平垂直居中

lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行,支援ie8 block1 block1 before center1 不...