詳解CSS居中布局技巧

1、詳解css居中布局技巧水平居中元素：方式一：css3 transform.parent position: relative;.child position: absolute;left: 50%:transform: translatex(-50%);方式二：flex 布局.parent display: flex;justify-content: center;適用于子元素為浮動，肯定定位，內(nèi)聯(lián)元素，均可水平居中。居中的元素為常規(guī)文檔流中的內(nèi)聯(lián)元素(display: inline)頻繁的內(nèi)聯(lián)元素有：span, a, img, input, label 等等.parent text-alig

2、n: center;居中的元素為常規(guī)文檔流中的塊元素(display: block)頻繁的塊元素：div, h1h6, table, p, ul, li 等等方式一：設置 margin.parent width: 100%;.child width: 600px;height: 50px;margin: 0 auto;background: 999;方式二：修改為 inline-block 屬性.parent text-align: center;.child display: inline-block;.child width: 100px;float: left;position: rel

3、ative;left: 50%;margin-left: -50px;方式一：.parent position: relative;.child position: absolute;width: 100px;left: 50%;margin-left: -50px;方式二：.parent position: relative;.child position: absolute;width: 100px;left: 0;right: 0;margin: 0 auto;垂直居中元素：方式一：css3 transform.parent position: relative;.child posit

4、ion: absolute;top: 50%;transform: translatey(-50%);方式二：flex 布局.parent display: flex;align-items: center;適用于子元素為浮動，肯定定位，內(nèi)聯(lián)元素，均可垂直居中。.text line-height: 200px;height: 200px;方式一：.parent position: relative;.childposition: absolute;top: 50%;height: 100px;margin-top: -50px;方式二：.parent position: relative;.c

5、hildposition: absolute;top: 0;bottom: 0;height: 100px;margin: auto 0;垂直居中元素：div width: 100px;height: 100px;margin: auto;position: fixed;/absolute is oktop: 0;right: 0;bottom: 0;left: 0;優(yōu)點：不僅可以實現(xiàn)在正中間，還可以在正左方，正右方元素的寬高支持百分比 % 屬性值和 min-/max- 屬性可以封裝為一個公共類，可做彈出層掃瞄器支持性好.child width: 100px;height: 100px;pos

6、ition: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;特點：良好的跨掃瞄器特性,兼容 ie6 - ie7靈便性差，不能自適應，寬高不支持百分比尺寸和 min-/max- 屬性.child width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);特點：內(nèi)容可自適應，可以封裝為一個公共類，可做彈出層可能干擾其他 transform 效果.parent display: flex;justify-content: center;align-items: center;這是 css 布局將來的趨勢。flexbox 是 css3 新增