css3文字水平垂直居中对齐的几种方法

1.使用绝对定位:

.div{

position:absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

2.flex布局:

.parent{

Justify-content:center;  // 子元素水平居中

align-items:center;       //子元素垂直居中

display:-webkit-flex;

}

3.使用 -webkit-box(注:

目前没有浏览器支持 box-align 属性。

Firefox 支持替代的 -moz-box-align 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性

.innerDisplay{

display:-webkit-box;

display:-webkit-flex;

display:flex;

-webkit-box-align:center;

-webkit-align-items:center;

}

猜你喜欢

转载自my.oschina.net/u/3762697/blog/2050383