时间:2021-04-16
如何让一个子元素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%);
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
复制代码代码如下:纯css实现div容器内图片上下左右居中效果*{margin:0;padding:0;list-style:none;}img{border:
html元素水平居中于其父级元素的方法:方法1:复制代码代码如下:左右居中方法1复制代码代码如下:html,body,div{margin:0;padding:
上下左右居中代码如下复制代码代码如下:div{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;
上下左右居中代码如下复制代码代码如下:div{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;
div显示上下左右滚动条这里是你要显示的内容 div显示上下滚动条的css代码这里是你要显示的内容 div显示左右滚动条的css代码这里是你要显示的内容