情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中
解决方案: { position:fixed;
left:0;
right:0;
top:0;
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