14种CSS实现水平或垂直居中的技巧，快来收藏

大家好，我是讯享网，很高兴认识大家。

8、absolute + translate

原理：利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用transform: translate(-50%, -50%);位移居中元素自身宽与高的50%就能达成居中的目的了。

缺陷：translate是css3属性，低版本浏览器不支持。

显著优势：无需固定定位元素的宽高。

css:

.example8 { position: relative; margin-top: 10px; width: 400px; height: 150px; font-size: 0; border: 1px solid #dcdcdc;}.example8 .con { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 15px; background: #afddf3;}

9、Flex + align-items

适用情景：多行文字（垂直居中）

原理：弹性布局，align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式，参考CSS-TRICKS。

缺陷：css3属性，低版本浏览器不支持。

显著优势：无需固定定位元素的宽高，代码干净利索。

css:

.example9 {

display: flex;

align-items: center;

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example9 .con {

font-size: 15px;

background: #afddf3;

}

10、Flex + justify-content

适用情景：多行文字（水平居中）

原理：弹性布局，justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，参考CSS-TRICKS。

缺陷：css3属性，低版本浏览器不支持。

显著优势：无需固定定位元素的宽高，代码干净利索。

css:

.example10 { display: flex; justify-content: center; margin-top: 10px; width: 400px; height: 150px; font-size: 0; border: 1px solid #dcdcdc;}.example .con { height: 80px; font-size: 15px; background: #afddf3;}

11、Flex + :before + flex-grow

适用情景：多行文字（垂直居中）

原理：弹性布局，Flex-direction：column;将项目垂直显示，正如一个列一样。flex-grow: [number];规定项目将相对于其他灵活的项目进行扩展的量，参考CSS-TRICKS。

缺陷：css3属性，低版本浏览器不支持，并且难度稍大，一般不会想到这种方法。

显著优势：无需固定定位元素的宽高

讯享网

css:

.example11 { display: flex; flex-direction: column; margin-top: 10px; width: 400px; height: 150px; font-size: 0; border: 1px solid #dcdcdc;}.example11:before { content: ‘’; flex-grow: .5;}.example11 .con { font-size: 15px; background: #afddf3;}

12、Flex + margin

缺陷：css3属性，低版本浏览器不支持。

css:

.example12 { display: flex; margin-top: 10px; width: 400px; height: 150px; font-size: 0; border: 1px solid #dcdcdc;}.example12 .con { margin: auto; width: 300px; font-size: 15px; background: #afddf3;}

13、Flex + align-self

原理：align-self定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

缺陷：css3属性，低版本浏览器不支持。

css:

.example13 { display: flex; justify-content: center; margin-top: 10px; width: 400px; height: 150px; font-size: 0; border: 1px solid #dcdcdc;}.example13 .con { align-self: center; width: 300px; font-size: 15px; background: #afddf3;}

14、Flex + align-content

原理：align-content在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直），弹性项目有多项此属性才会发挥作用。

缺陷：css3属性，低版本浏览器不支持。

css:

.example14 {

display: flex;

align-content: center;

flex-wrap: wrap;

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example14:before, .example14:after {

content: “”;

display: block;

width: 100%;

}

.example14 .con {

height: 80px;

width: 300px;

font-size: 15px;

background: #afddf3;

}

下面是一个比较常见的例子,往往是不想让图片发生变形并且不管尺寸大小均会显示在容器的正中央（以下例子应用的是第8条）。

html:

14种CSS实现水平或垂直居中的技巧，快来收藏

13、Flex + align-self

相关推荐