css:子元素div 上下左右居中方法总结
2016-07-28 17:58
696 查看
最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css、html、js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证)。
情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中
解决方案: { position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto; }
备注:此处小编使用position:fixed为最佳方案,因为position:fixed定位是相对于整个浏览器页面的。
情景二:一个父元素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%);
情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中
解决方案: { position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto; }
备注:此处小编使用position:fixed为最佳方案,因为position:fixed定位是相对于整个浏览器页面的。
情景二:一个父元素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%);
相关文章推荐
- Input输入框中加入小图标
- Gulpfile.js——编译、压缩、合并js和css文件
- css3中的zoom元素属性值测试
- css3中的zoom元素属性值测试
- 块级元素、行内元素、空元素
- html表格样式
- CSS Border属性solid(实线)使用介绍
- CSS box-flex属性,然后弹性盒子模型简介
- 巧用cssText属性批量操作样式
- CSS学习笔记--基础(二)
- CSS学习笔记:inline和inline-block的区别
- checkbox样式自定义
- HTML篇之CSS样式——CSS水平垂直居中对齐(多种方式)
- css sprites
- 今天发现了css中的一个顺序问题
- HTML学习05-HTML样式(CSS)
- CSS3基础入门学习: 背景制作实例!
- html a链接样式
- WPF样式动画Trigger.EnterActions和Trigger.ExitActions(ExitActions其实可以不做任何事情)
- css-background属性