如何在页面布局中实现元素水平+垂直居中
2018-01-30 17:26
141 查看
页面布局中常常见到需要使一个子元素相对于父元素垂直水平居中,总结几点方法如下:
方法一:使用【margin:auto实现绝对定位元素的居中】
父元素:position: relative;
子元素:
方法二:使用【margin 负间距】
父元素:position: relative;
子元素:
方法三:【Transforms 变形】
父元素:position: relative;
子元素:
方法四:使用【flex布局】结合垂直水平居中方法
父元素:
子元素:
方法一:使用【margin:auto实现绝对定位元素的居中】
父元素:position: relative;
子元素:
div{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }
方法二:使用【margin 负间距】
父元素:position: relative;
子元素:
div{ width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px;//自己width的一半 margin-top:-100px;//自己height的一半 }
方法三:【Transforms 变形】
父元素:position: relative;
子元素:
div{ width: 200px; height: 200px; background: green; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); /*自己的50% */ }
方法四:使用【flex布局】结合垂直水平居中方法
父元素:
box{ width: 600px; height:600px; display:flex; justify-content:center; align-items:center; /* 父级盒子只要三句话就可以实现不定宽高水平垂直居中。 */ }
子元素:
.box>div{ background: green; width: 200px; height: 200px; }
相关文章推荐
- css实现高度不固定的div元素模块在页面中水平垂直居中
- CSS:如何让元素在页面中水平垂直居中?
- 如何实现整个页面垂直和水平居中
- 如何实现固定宽高的DOM元素的水平垂直居中
- css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案
- css---flex布局中,如何响应式 得水平垂直居中?flex子元素左右 上下居中
- 父元素为一个div,宽度高度不固定,子元素是一个块状元素,宽高已知,如何实现子元素在父元素内水平、垂直居中?
- 如何实现一个img元素在指定容器中水平,垂直居中
- 根据HTML+CSS完成一个三列布局,左右侧栏宽为180px,高为300px;中间栏自适应,高为300px;中间栏子元素(宽高不确定)实现水平、垂直居中。
- css3实现元素水平垂直居中
- 绝对定位的盒子如何实现水平垂直居中
- 经典CSS坑:如何完美实现垂直水平居中?
- css 实现元素水平垂直居中总结5中方法
- CSS在页面布局中实现div垂直居中的方法总结
- CSS实现元素水平、垂直居中的方法
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
- JS实现在不知道盒子宽高的情况下,默认让盒子在页面中水平垂直居中
- Android开发布局系列: LinearLayout布局实现垂直水平居中
- css3 实现元素水平和垂直居中