html盒子整体向下移动,盒子上下左右居中方法全(持续更新中) | 您所在的位置:网站首页 › 字体往上移用什么键盘 › html盒子整体向下移动,盒子上下左右居中方法全(持续更新中) |
总是忘记这几个方法,今天来记录一下 一、已知大小盒子;左右居中 1、 使用定位,左右拉取方法: html: css: .box{width: 300px;height: 300px;border: 1px solid orange;position: relative;} .child{width: 100px;height: 100px;border: 1px solid blue;position:absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;} 2、使用margin:auto,方法: html: css: .box{width: 300px;height: 300px;border: 1px solid red;position: relative;} .child{width: 100px;height: 100px;border: 1px solid green;position:absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;} 二、未知大小盒子左右居中, 1、使用位移方法,兼容性较低,移动端慎用 html: 我是子盒子css: .box{width: 300px;height: 300px;border: 1px solid red;position: relative;} .child{width:auto;border: 1px solid green;position:absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);} 2、组合使用display:table-cell和vertical-align、text-align,使父元素内的所有行内元素水平垂直居中(内部div设置display:inline-block即可)。 html: 我爱你 我爱你 亲爱的中国 我爱你 亲爱的中国 div(inline-block)css: /*** table-cell middle center组合使用 ***/ .cell { display: table-cell; vertical-align: middle; text-align: center; width: 240px; height: 180px; border:1px solid #666; } 3、用弹性布局实现垂直左右居中 html: css: *{ margin: 0; padding: 0; } .wrap{ width: 100px; height: 100px; border: 1px solid #000; margin: 3.125em auto; display: flex; justify-content: center; align-items: center; } .in{ width: 10px; height: 10px; background: #000; border-radius: 50%; } display:flex; 设置.wrap为弹性布局 justify-content:center;定义项目在主轴(水平方向)上居中对齐 align-items:center;定义项目在交叉轴(垂直方向)上居中对齐 img元素再div中居中对齐: 第一种方法: 第一步:在img标签后面添加一个span元素
第二步:为这几个元素设置样式 1.把#div1元素设置text-align:center 2.把添加的元素span转化为行内块元素(display:inline-block),并且设置vertical-align:middle 3.为img元素设置vertical-align:middle。 完成以上操作之后,这个Img元素在#div1中就是垂直居中的了,这种方法的兼容性等比较好,唯一的缺点可能就是要在元素后面添加一个元素 (注意:这个元素最好是span元素,如果是div元素的话,在低版本ie下有兼容问题) 第二种方法: 这种方法利用了css3的新特性 为#div1设置display:flex;vertical-align:middle;align-items:middle。 这种方法的缺点就是只要不支持css3的浏览器,那就不会起作用了。 |
CopyRight 2018-2019 实验室设备网 版权所有 |