垂直居中四种方法

最新推荐文章于 2024-09-20 14:39:18 发布

乐夫天命兮

最新推荐文章于 2024-09-20 14:39:18 发布

阅读量370

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/wangxinxin1992816/article/details/84401753

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>垂直水平居中</title>
	</head>
	<style>
		/*垂直水平居中方法一：position*/
		/*.parent{
			width: 800px;
			height: 600px;
			background: red;
			position: relative;
		}
		.child{
			width: 300px;
			height: 200px;
			background: black;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -100px;
			margin-left: -150px;
		}*/
		/*垂直水平居中方法二：flex*/
		/*.parent{
			width: 800px;
			height: 600px;
			background: red;
			display: flex;
    		align-items:center;
    		justify-content:center;
		}
		.child{
			width: 300px;
			height: 200px;
			background: black;
		}*/
		/*垂直水平居中方法二：transform*/	
		/*.parent{
			width: 800px;
			height: 600px;
			background: red;
			position: relative;
		}
		.child{
			width: 300px;
			height: 200px;
			background: black;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}*/
		/*垂直水平居中方法四：table*/	
		.wrp {
            width: 500px;
            height: 500px;
            background-color: #0022df;/* 外：蓝色 */
           display: table;
        }
        .subwrapper {
            display: table-cell;
            vertical-align: middle;
        }
        .content {
        	width: 250px;
            height: 250px;
            background-color: #aa0021;/* 外：红色 */
            margin: 0 auto;
        }
	</style>
	<body>
		<!--<div class="parent">
			<div class="child">
			</div>
		</div>-->
		<div class="wrp">
	        <div class="subwrapper">
	            <div class="con content">
	            </div>
	        </div>
	    </div>
	</body>
</html>