CSS 水平居中

固定宽度,块级元素

我是居中块

            
            .container {
                width: 970px;
                margin: 0 auto;
            }
            
        

行内块元素,不固定宽度

我是居中块

            
            .inline-parent {
                text-align: center;
            }
            .inline-center {
                display: inline-block;
            }
            
        

绝对定位元素,固定宽度,父级无法获取子元素高度

我是居中块

            
            .absolute-parent {
                position: relative;
            }
            .absolute-regular-center {
                position: absolute;
                left: 50%;
                width: 540px;
                height: 260px;
                margin-left: -270px;
            }
            
        

绝对定位元素,不固定宽度,父级无法获取子元素高度,只支持IE9以上浏览器

我是居中块

        .absolute-parent {
            position: relative;
        }
        .absolute-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }