HTML中div块水平垂直居中的三个方法

Posted 2020-06-21 金甲

第一种方案：框内是div块的情况

　　　　　　　　　　　　　　div.myid{
				display:flex;
				justify-content:center;
				align-items:center;
				height:500px;
			}
			div.myid div.mydiv{
				width:200px;
				height:200px;
				border:1px solid red;
			}

　　低版本的浏览器的兼容性不够好，选择要慎重，

第二种方案：使框内div居中，使用定位的方式；

　　　　　　　　　　　　　　div.myid{
				height:500px;
				position:relative;
			}
			div.myid div.mydiv{
				width:200px;
				height:200px;
				border:1px solid red;
				position:absolute;
				left:50%;
				top:50%;
				margin-left:-100px;
				margin-top:-100px;
			}

　　

第三种使用定位的方法：利用上下左右为0，然后margin：auto;绝对居中

　　　　　　　　　　　　　　div.myid{
				width:500px;
				height:500px;
				position:relative;
				border:1px solid #333;
			}			
			div.myid div.kg{
			}
			div.myid div.mydiv{
				width:200px;
				height:200px;
				border:1px solid red;
				line-height:40px;
				position:absolute;
				left:0;
				top:0;
				bottom:0;
				right:0;
				margin:auto;
			}

最后一种方案是使用父元素display:table; 子元素：display:table-cell;vertical-align:middle; 这个方法我不太喜欢，所以先不收集，要用的时候百度就出来一大堆；

对了，再就是文字元素绝对居中那就是使用：line-height:40px;(父元素的高) text-align:center;