css垂直居中--div

「爱情、让人受尽委屈。」 2022-07-15 23:18 303阅读 0赞

面试到css的时候，人们经常会问给你一个div固定宽度.

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.container{
    			position: relative;
    			width: 400px;
    			height: 400px;
    			border: 1px solid red;
    		}
    		.container .center{
    			width: 80px;
    			height: 80px;
    			background-color: #ccc;
    		}
    	</style>
    </head>
    <body>
    	<div class="container">
    		<div class="center"></div>
    	</div>
    </body>
    </html>

让它左右居中上下居中。

position: absolute;
    			top: 50%;
    			left: 50%;
    			margin-top: -40px;
    			margin-left: -40px;
    		}

如果你这样回答，面试官又有可能会问：不知道div的宽高怎么办？

.container .center{
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			-webkit-transform: translateX(-50%) translateY(-50%);
    			transform: translate(-50%, -50%);          //简洁的写法
    		}
    
    		.container .center{
    			position: absolute;
    			top: 0;
    			left: 0;
    			right: 0;
    			bottom: 0;
    			margin: auto;
    		}

这个两个方法可以，轮流注释掉看看效果。

还有一个给父级div加伪类的方法！同时给父级div价格text-align:center

.container:after{
    			content: '';
    			display: inline-block;
    			height: 100%;
    			vertical-align: middle;
    		}
    
    		.container .center{
    			display: inline-block;
    			vertical-align: middle;
    		}

当然css3给我们送来一个好的助攻，就是flex布局！只需要给父级div加三句话：

.container{
    			position: relative;
    			width: 400px;
    			height: 400px;
    			border: 1px solid red;		
    
    			justify-content:center;
    			align-items:center;
    			display:-webkit-flex;
    
    		}

总共是五种方法，大家各取所需吧！如果你有更好的方法，please tell me without hesitation！ ![偷笑][titter.gif] 感觉回到的写英语作文的时代了！

以下是全部代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.container{
    			position: relative;
    			width: 400px;
    			height: 400px;
    			border: 1px solid red;
    			/*与方法四配合使用*/
    			/*text-align: center;*/
    
    			/*方法五*/
    			/*justify-content:center;
    			align-items:center;
    			display:-webkit-flex;*/
    		}
    		.container .center{
    			width: 80px;
    			height: 80px;
    			background-color: #ccc;
    		}
    	
    		/*方法一*/
    		.container .center{
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			margin-top: -40px;
    			margin-left: -40px;
    		} 
    
    		/*方法二*/
    		/*.container .center{
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			-webkit-transform: translateX(-50%) translateY(-50%);
    			transform: translate(-50%, -50%);          //简洁的写法
    		}*/
    
    		/*方法三*/
    		/*.container .center{
    			position: absolute;
    			top: 0;
    			left: 0;
    			right: 0;
    			bottom: 0;
    			margin: auto;
    		}*/
    
    		/*方法四*/
    		/*给container加一个text-aligin:center*/
    		/*.container:after{
    			content: '';
    			display: inline-block;
    			height: 100%;
    			vertical-align: middle;
    		}
    		.container .center{
    			display: inline-block;
    			vertical-align: middle;
    		}*/
    
    	</style>
    </head>
    <body>
    	<div class="container">
    		<div class="center"></div>
    	</div>
    </body>
    </html>

[img p居中代码请戳我][img p]

[titter.gif]: /images/20220716/506601cc843e4c4e92f1bf12d8e38b82.png
[img p]: http://blog.csdn.net/u011456552/article/details/52650088