如何将一个div水平垂直居中?6种方法做推荐
2017-04-01 13:42
671 查看
方案一:
div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】,
兼容性:,IE7及之前版本不支持
div{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }
方案二:
div绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。
div{ width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }
方案三:
div绝对定位水平垂直居中【Transforms 变形】
兼容性:IE8不支持;
div{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }
方案四:
css不定宽高水平垂直居中
.box{ height:600px; display:flex; justify-content:center; align-items:center; /* aa只要三句话就可以实现不定宽高水平垂直居中。 */ } .box>div{ background: green; width: 200px; height: 200px; }
方案五:
将父盒子设置为table-cell元素,可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构
<p class="outerBox tableCell"> </p><p class="ok"> </p><p class="innerBox">tableCell</p> <p></p> <p></p> /* table-cell实现居中 将父盒子设置为table-cell元素,设置 text-align:center,vertical-align: middle; 子盒子设置为inline-block元素 */ .tableCell{ display: table; } .tableCell .ok{ display: table-cell; text-align: center; vertical-align: middle; } .tableCell .innerBox{ display: inline-block; }
方案六:
对子盒子实现绝对定位,利用calc计算位置
<p class="outerBox calc"> </p><p class="innerBox">calc</p> <p></p> /*绝对定位,clac计算位置*/ .calc{ position: relative; } .calc .innerBox{ position: absolute; left:-webkit-calc((500px - 200px)/2); top:-webkit-calc((120px - 50px)/2); left:-moz-calc((500px - 200px)/2); top:-moz-calc((120px - 50px)/2); left:calc((500px - 200px)/2); top:calc((120px - 50px)/2); }
相关文章推荐
- 如何将一个div水平垂直居中?4种方法做推荐
- 如何使一个div在另一个div中绝对居中(水平与垂直方向)
- 父元素为一个div,宽度高度不固定,子元素是一个块状元素,宽高已知,如何实现子元素在父元素内水平、垂直居中?
- 如何让一个DIV水平,垂直方向都居中于浏览器?
- 如何让一个DIV水平,垂直方向都居中于浏览器?
- css让一个div水平垂直居中方法大全
- 如何使一个div在另一个div中绝对居中(水平与垂直方向)
- DIV的垂直和水平居中的各种方法,总有一个适合你!
- 一个好用的让DIV水平垂直居中的方法
- 使一个div在body中水平垂直居中的方法
- 如何让一个div水平和垂直居中对齐
- 如何让一个div在另一个div中绝对居中(水平+垂直)
- 如何让DIV水平和垂直居中三种方法
- 让DIV水平垂直居中的两种完美方法推荐
- html中div如何水平和垂直居中的几种css方法代码
- div垂直水平自适应居中解决方法
- 如何让div水平居中以及垂直居中,在宽高不定的情况下
- 如何使图片在DIV 中水平垂直居中
- 如何让一个不固定高宽的图片,垂直和水平居中在页面中间?
- 【转】如何让DIV水平和垂直居中