杭州网站建设 杭州app,wordpress增加语言,快照关键词优化,贵阳响应式网站开发css实现子盒子在父级盒子中上下左右居中 几种常用的上下左右居中方式 HTML代码部分
div classboximg src./img/77.jpeg alt classimg
/divcss部分
方式一
利用子绝父相和margin:auto实现
sty…css实现子盒子在父级盒子中上下左右居中 几种常用的上下左右居中方式 HTML代码部分
div classboximg src./img/77.jpeg alt classimg
/divcss部分
方式一
利用子绝父相和margin:auto实现
stylebody{margin: 0;}.box{height: 100vh;background-color: hotpink;position: relative;}.img{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}
/style方式二
利用子绝父相和css3的transform属性实现
stylebody {margin: 0;}.box {height: 100vh;background-color: hotpink;position: relative;}.img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
/style首先把内部盒子的位置设置为顶部和左侧距离大盒子顶部和左侧都是大盒子高度和宽度的50%然后再把小盒子的顶部和左侧的位置都回退内部小盒子高度和宽度的50%这样就刚好实现小盒子上下左右都居中在大盒子内部
图示第一步 第二步 方式三
利用flex布局实现弹性盒子
stylebody {margin: 0;}.box {height: 100vh;background-color: hotpink;/* 对box大盒子启用flex弹性盒子布局 */display: flex;/* 定义box中的项目对于启用flex布局的元素父元素也称之为容器其内部的子元素统一的称之为项目在交叉轴flex布局中的定义垂直方向上的轴线水平的轴线称之为主轴上的对齐方式 上下居中 */align-items: center;/* 定义项目在主轴上的对齐方式左右居中图片高度会撑满 */justify-content: center;}
/style方式四
利用grid布局实现网格布局
stylebody {margin: 0;}.box {height: 100vh;background-color: hotpink;/* 在父元素上开启网格布局采用网格布局的父元素被称之为容器container内部采用网格定位的子元素称为项目item */display: grid;}.img {display: inline-block;/* align-content属性是整个内容区域的垂直位置上中下 */align-self: center;/* justify-content属性是整个内容区域在容器里面的水平位置 */justify-self: center;}
/style方式五
利用display: flex和margin: auto实现
stylebody {margin: 0;}.box {width: 100vw;height: 100vh;background-color: hotpink;display: flex;}.img {/*上下左右都居中*/margin: auto;}/style方式六
待更新…
