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 不...