水平居中元素

普通流inline

普通流block

 浮动元素

元素有一定的宽度,且宽度已知具体数值:

元素没有具体宽度或宽度未知:

绝对定位

未知元素宽度时:

已知元素宽度时:

---

普通流inline

text-align:center

注意: 

span:行内元素  h1:块级元素  p:块级元素

text-align:center不能直接用在行内元素span上,而是要在行内元素的父元素上添加

行内元素设置居中直接在父盒子上添加text-align:center即可

普通流block

块级元素存在宽度,高度,外边距margin

可以直接设置外边距margin使块级元素居中 : margin:0 auto ;(上下为0,左右自适应)

注意:

块级元素居中,必要条件: 元素必须具有宽度 或 元素内有内容撑起宽度

margin: 0 auto ;不支持ie5和ie6

当要求在ie5/ie6进行设置时,方法:给父元素添加text-align:center,其他不需要居中的元素设置text-align:left

 浮动元素

为浮动元素或浮动元素的子元素设置居中:

元素有一定的宽度,且宽度已知具体数值:

设置位置偏移 position:relative ; left:50% ; margin-left:(盒子宽度的一半) ;

元素没有具体宽度或宽度未知:

设置水平偏移,transform:translateX(-50%) 需要考虑兼容性问题

绝对定位

未知元素宽度时:

行内元素不能直接设置text-align:center,但如果一个行内元素设置position:absolute,就可以像块级元素一样设置居中margin:0 auto ;

已知元素宽度时:

方法一: 设置绝对定位,left:50%,margin-left:(已知宽度一半)

 方法二: 设置水平偏移,transform:translateX(-50%)