盒子居中的几种方式

最新推荐文章于 2023-11-03 10:33:06 发布

scottdao

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量3.6k

点赞数 2

本文链接：https://blog.csdn.net/qq_30101879/article/details/78306979

版权

第一种：普通流盒子居中；

通过设置上边框为透明色，进行高度及计算，后居中；

*{
                margin: 0;
                padding: 0;
            }
            .big{
                width: 400px;
                height: 400px;
                background: blue;
                border-top: 1px solid transparent;
            }
            .big>div{
                width: 200px;
                height: 200px;
                background: red;
                margin: 25% auto;
            }
            
        </style>
    </head>
    <body>
        <div class="big">
            <div>列1</div>
        </div>
    </body>

第二种：利用相对定位和绝对定位进行居中；

.big{
				width: 400px;
				height: 400px;
				background: blue;
				position: relative;
			}
			.big>div{
				width: 200px;
				height: 200px;
				background: red;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
			
		</style>
	</head>
	<body>
		<div class="big">
			<div>列1</div>
		</div>
	</body>

第三种方式：利用button做外容器，里边的块元素会自动垂直居中，只需要控制一下水平居中就可以达到效果；

	<style>
			*{
				margin: 0;
				padding: 0;
			}
			.big{
				width: 400px;
				height: 400px;
				background: blue;
				
			}
			.big>div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 0 auto;
			}
			
		</style>
	</head>
	<body>
		<button class="big">
			<div>列1</div>
		</button>
	</body>

第四种利用弹性盒子居中：CSS3中引入的新布局方式，比较好用。缺点：IE9以及IE9一下不兼容。

	<style>
			*{
				margin: 0;
				padding: 0;
			}
			.big{
				width: 400px;
				height: 400px;
				background: blue;
				display: flex;
			}
			.big>div{
				width: 200px;
				height: 200px;
				background: red;
				margin: auto;
			}
			
		</style>
	</head>
	<body>
		<div class="big">
			<div>列1</div>
		</div>

第五种：利用transform居中；这种方法灵活运用CSS中transform属性，较为新奇。

<style>
			*{
				margin: 0;
				padding: 0;
			}
			.big{
				width: 400px;
				height: 400px;
				background: blue;
				
			}
			.big>div{
				width: 200px;
				height: 200px;
				background: red;
				transform: translate(50%,50%);
			}
			
		</style>
	</head>
	<body>
		<div class="big">
			<div>列1</div>
		</div>

第六种：利用table-cell居中方式

<style>
			*{
				margin: 0;
				padding: 0;
			}
			.big{
				width: 400px;
				height: 400px;
				background: blue;
				display: table-cell;
				vertical-align: middle;
				
			}
			.big>div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 0 auto;
				
			}
			
		</style>
	</head>
	<body>
		<div class="big">
			<div>列1</div>
		</div>