DIV+CSS布局-水平居中布局方法(当元素内容宽度小于元素宽度时):
一、行内元素水平居中;
(一)文本节点元素水平居中:在其块状父元素上写如下样式:{text-align:center;};
(二)图像元素水平居中:在其块状父元素上写如下样式:{text-align:center;};
(三)背景图像水平居中方法:{background-position:center top};
二、块级元素水平居中;
(四)div元素水平居中:
1.父元素写样式{text-align:center;}
2.自身元素写样式{display:inline-block;}
(五)div元素水平居中:在自身元素上写如下样式:{margin:0 auto;width:固定值;};
(六)div元素水平居中:
1.父元素写{position:relative;确定宽度}
2.自身元素写{position:absolute;left:50%;margin-left:负的自身宽度的1/2;}
(七)div元素水平居中:
1.父元素写{position:relative;确定宽度}
2.自身元素写{position:absolute;left:50%;transform: translateX(-50%);}