css垂直居中最常用的八种布局方法

最新推荐文章于 2024-01-29 10:00:00 发布

嘿！早安

最新推荐文章于 2024-01-29 10:00:00 发布

阅读量566

点赞数

文章标签： css

本文链接：https://blog.csdn.net/All_ison/article/details/110096771

版权

css垂直居中最常用的八种布局方法

首先定义两个盒子,然后进行下布局样式操作!

利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center

块级元素设置其本身的left 和 right margins为auto即可

本文收集了八种利用css进行元素的垂直居中的方法

每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可
<body>
        <div class="box">
            <div class="coco"></div>
        </div>
</body>

	<style>
			/* 1 display:flex */
				.box{
				width: 400px;
				height: 400px;
				background-color: pink;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.coco{
				height: 100px;
				width: 100px;
				background-color: #06A9F4;
			}

			/* 第二  table-cell */
			.box{
				width: 400px;
				height: 400px;
				background-color: #06A9F4;
				display: table-cell;
				text-align: center;
				vertical-align: middle;
			}
			.coco{
				width: 100px;
				height: 100px;
				background-color: #42B983;
				display: inline-block;
			}


			/* 方法3 */
				.box{
				width: 400px;
				height: 400px;
				background-color: #666666;
				overflow: hidden;
			}
			.coco{
				width: 100px;
				height: 100px;
				background-color: #C82519;
				margin: 50% auto;
				transform: translateY(-50%);
			}
			/* 方法四  inline-block +  vertical-align*/
				.box{
				width: 300px;
				height: 300px;
				background-color: pink;
				text-align: center;
				line-height: 300px;
			}
			.coco{
				width: 100px;
				height: 100px;
				line-height: 100px;
				background-color: plum;
				display: inline-block;
				vertical-align:middle;
			}

			/* 方法5  abloute  负marin */
				.box{
				width: 300px;
				height: 300px;
				position: relative;
				background-color: plum;
			}
			.coco{
				width: 100px;
				height: 100px;
				background-color: #42B983;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -50px;
				margin-top: -50px;
				
			}
			/* 6. 父节relative   abouter  margin:auto */
			.box{
				width: 400px;
				height: 400px;
				position: relative;
				background-color: plum;
			}
			.coco{
				width: 100px;
				height: 100px;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				background-color: #42B983;
			}
			

			/* 第7点 */
			.box {
				width: 300px;
				height: 300px;
				position: relative;
				background-color: #C82519;

			}
			.coco{
				width: 100px;
				height: 100px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				background-color:#06A9F4 ;
			}
			
			/* 第八点 强大的grid*/
			.box{
				width: 300px;
				height: 300px;
				display: grid;
				background-color: palegoldenrod;
			}
			.coco{
				width: 100px;
				height: 100px;
				align-self: center;
				justify-self: center;
				background-color: #E5E5E5;
			}
			
		</style>

嘿！早安

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css垂直居中最常用的八种布局方法

css垂直居中最常用的八种布局方法首先定义两个盒子,然后进行下面操作! <body> <div class="box"> <div class="coco"></div> </div></body> 方法一 display:flex /* 1 display:flex */ .box{ width: 40...
复制链接

扫一扫