css3 自适应 图片居中,图片和文字自适应居中与CSS垂直水平居中

图片和文字自适应居中与CSS垂直水平居中

图片居中：

css代码：

.banner{

width:100%;

position:relative;

height:600px;

overflow:hidden;

}

.banner img {

height: 100%;

width: auto;

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%);

}

html代码：

文字居中：依然是用transform的思想，内部容器相对于外部容器绝对定位，上边top和左边left各偏移50%，再使用transform属性转换。

css代码：

.outside{

width: 500px;

height: 255px;

margin: 0 auto;

background: #ccc;

overflow: hidden;

position: relative;

border-radius: 4px;

}

.inside {

position: absolute;

left: 50%;

top: 50%;

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

}

p {

text-align: center;

}

html代码：

我是居中的

打赏

微信扫一扫，打赏作者吧～