让div水平垂直居中
2018-02-23 18:58
344 查看
方法一(最常用的办法)
方法二(IE8不支持)
方法三(利用弹性盒,将需要居中的div的父元素的display属性设置flex)
div{ width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }
方法二(IE8不支持)
div{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }
方法三(利用弹性盒,将需要居中的div的父元素的display属性设置flex)
.box{ height:600px; display:flex; justify-content:center; align-items:center; /* aa只要三句话就可以实现不定宽高水平垂直居中。 */ } .box>div{ background: green; width: 200px; height: 200px; }
相关文章推荐
- css div的水平、垂直同时居中
- DIV中的文字居中方法<水平居中、垂直居中>
- css实现div的水平和垂直居中
- DIV水平垂直居中 兼容多种浏览器
- 如何让一个div水平和垂直居中对齐
- div中图片水平垂直居中
- div垂直和水平居中的几种方法
- div盒子水平垂直居中方法
- html中div使用CSS实现水平/垂直居中的多种方式
- 如何让DIV相对于body水平和垂直居中
- 纯CSS设计div内部元素水平垂直居中
- 关于css中两层div的水平垂直居中问题
- DIV水平和垂直居中
- CSS自适应高度的div垂直水平居中
- div盒子水平垂直居中的方法
- 如何使img或者div在div中水平垂直居中显示
- DIV 水平垂直居中
- div里的内容水平居中和垂直居中
- CSS3中DIV水平垂直居中-2(3)
- 如何让div水平垂直居中