元素div|元素div 上下左右居中方法总结
元素div 上下左右居中方法总结
情景一：一个浏览器页面中，只有一个div模块，让其上下左右居中
解决方案：{ position:fixed;
left:0;
right:0;
top:0;
【元素div|元素div 上下左右居中方法总结】bottom:0;
margin:auto;
}
情景二：一个父元素div，一个已知宽度、高度的子元素div(200*300)
解决方案： 1、position布局
{
position:absolute/fixed;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-150px;
}
情景三:一个父元素div，一个未知宽度、高度的子元素div
解决方案： 1、position布局，position设为absolute，其他同情景一
2、display：table
父级元素：{ display:table;
}
子级元素： { display:table-cell;
vertical-align:middle }
3、flex布局
父级元素：{ display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
子级元素：{flex:1}
4、translate
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
转载于:https://www.cnblogs.com/sueing/p/9516659.html
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- docker镜像探索----dive工具
- 你也许不知道的Vuejs|你也许不知道的Vuejs - 花式渲染目标元素
- React.js的表单(六)
- HTML5学习之ul|HTML5学习之ul li列表实战
- 集合框架(集合嵌套存储和遍历元素的案例代码实现)
- 第六课|第六课 js管理页面元素位置大小
- css|css中元素的显示与隐藏
- 承载梦想一路前行小春‖号氧元素3周年庆典之地中海豪华邮轮行
- [Py023]List元素重复