详解 CSS 居中布局技巧

水平居中元素：

方式一：CSS3 transform

.parent {

position: relative;

}

.child {

position: absolute;

left: 50%:

transform: translateX(-50%);

}

方式二：flex 布局

.parent {

display: flex;

justify-content: center;

}

适用于子元素为浮动，绝对定位，内联元素，均可水平居中。

居中的元素为常规文档流中的内联元素(display: inline)

常见的内联元素有：span, a, img, input, label 等等

.parent {

text-align: center;

}

居中的元素为常规文档流中的块元素(display: block)

常见的块元素：div, h1~h6, table, p, ul, li 等等

方式一：设置 margin

.parent {

width: 100%;

}

.child {

width: 600px;

height: 50px;

margin: 0 auto;

background: #999;

}

方式二：修改为 inline-block 属性

text {

height: 100px;

line-height: 100px;

text-align: center;

}

View Code
来源:详解 CSS 居中布局技巧