美文网首页
div垂直加水平居中

div垂直加水平居中

作者: Homary | 来源:发表于2018-03-01 11:30 被阅读0次

一: 绝对定位居中: 外层div相对对位,内层div绝对定位,top、left分别设为50%,再通过设置margin-top、margin-left为高度宽度的负数
{
position: absolute;
top:50%;
left:50%;
margin-top:
margin-left:
}
不足之处: 宽度必须是固定值

二: {
width: 70%;
position: absolute;
top:0; left:0; bottom:0; right:0;
margin: auto
}
这个方法,不仅能在inner宽度不确定时发挥作用,还能兼容各种主流浏览器,看上去似乎很完美,但事实上,当我们的需求改为:宽度随内部文字自适应 ,即宽度未设置时,这种方法就无法满足需求了,原因是left、right设为0后,inner在宽度未设置时将占满父元素的宽度。

运用CSS3:(兼容性问题: ie11- 不兼容)
三: {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%)
}
四: flex弹性盒子居中

div中img图片垂直居中(笔试)
方法一: display:table-cell;
text-align: center //水平居中
vertical-align: middle;
方法二: position: absolute; //父元素position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)

相关文章

  • CSS水平垂直居中总结

    CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中: 让有宽度的div水平居中:...

  • CSS居中大全(带截图)

    文字水平居中 图片水平垂直居中 图片与文字水平垂直居中 代码同上 DIV相对于页面垂直居中并且响应式 视口绝对垂直...

  • [2020-08-10]css3中的常用几种布局

    div的水平垂直居中 flex布局,使用display: flex实现水平垂直居中 grid布局 使用grid布局...

  • 水平垂直居中的实现方法

    小div在大div里面水平垂直居中的实现方法 初学前端时,我们都经常会练习实现关于水平垂直居中。那么你们都会用...

  • html+css,让div水平垂直居中的几种方式

    在web前端开发中经常需要使用到让div进行水平和垂直居中的技术,现在我们就来谈谈如何实现div水平垂直居中(如下...

  • CSS居中

    不用float的多个div的水平居中 div的垂直居中1.display:flex; position:absol...

  • css div垂直居中

    方案一:div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 方案二:div绝对定位水平垂...

  • 动态设置div css属性

    jQuery实现水平和垂直居中 jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取D...

  • DIV+CSS实现居中

    垂直居中 height:div的高度line-height:div的行高 并且水平居中 text-align:规定...

  • DIV水平垂直居中

    CSS Code : HTML Code :

网友评论

      本文标题:div垂直加水平居中

      本文链接:https://www.haomeiwen.com/subject/kxrgxftx.html