居中的幾種方法

本文轉載於:猿2048網站居中的幾種方法

一：經過margin負值

.one{ position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-left: -100px;}

兼容性好，可是必需要定寬高

二：經過margin:auto

.two{ position: absolute; width: 200px; height:200px; margin: auto 0;}

以上兩種方法均可以把absolute換成fixed,注意，fixed在ie下不支持

三:行內元素居中

.three{ width: 100px; height: 100px; line-height: 100px; text-align: center;}

這種方法只能居中行內元素。經常使用於文字對其居中

四：transform居中

.four{ position: absolute; top: 50%; height: 50%; transform: translate(-50%, -50%);}

存在css3瀏覽器兼容問題

五：flex佈局

.five{ display: flex; align-items: center; justify-content: center;}

存在css3瀏覽器兼容問題