对于宽度小于父元素宽度的行内子元素,要实现水平居中,可以给父元素使用:
div { text-align: center; }
小于父元素宽度的情况,如果已知子元素宽度,可以使用相对定位和负外边距方法:
div img { position: relative; left: 50%; margin-left: -130px; //元素宽度除以2 }
小于父元素宽度的情况,如果子元素宽度未知,可以将子元素设置为块级元素,再设置左右外边距为auto:
div img { display: block; margin: 0 auto; }
如果子元素宽度超出父元素宽度,但子元素宽度是固定的,则可以使用相对定位和负外边距来实现:
div img { position: relative; left: 50%; margin-left: -540px; //元素宽度除以2 }
如果子元素宽度超出父元素宽度,且子元素宽度是自动的,则可以使用相对定位和transform属性来实现:
div img { position: relative; left: 50%; transform: translateX(-50%); }