当前位置：网站首页>实现一个盒子在父盒子中水平垂直居中的几种“姿势”

实现一个盒子在父盒子中水平垂直居中的几种“姿势”

2022-04-23 12:28:00 【如花菇凉】

道理说千遍，不如自己敲一遍，来吧，老铁们，就当是复习下加深印象。

首先来个sample

<body>
   <div class="container" id="container">
      <div class="box" id="box">我是子盒子</div>
   </div>
</body>
<style>
.container{
    position: relative;
    height: 500px;
    box-sizing: border-box;
    border: 1px solid #999;
}
.box{
    box-sizing: border-box;
    background-color: pink;
    width: 200px;
    height: 100px;
}
</style>

效果如下

 方法一 绝对定位+margin负值

 /* 缺陷：需要知道盒子的宽高 */
.box{
    box-sizing: border-box;
    background-color: pink;
    position:absolute;
    width: 200px;
    height: 100px;
	left:50%;
	top:50%;
	margin-left:-100px;
	margin-top:-50px;
}

方法二 绝对定位+margin:auto


        /* 优点：不需要盒子的确切宽高 */
        /* 缺陷：盒子一定要有宽高，缺一不可，缺少一个都达不到效果 */
.box{
    box-sizing: border-box;
    background-color: pink;
    position:absolute;
    width: 200px;
    height: 100px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    }

方法三 绝对定位+translate()

/* 优点：不需要盒子的确切宽高，也不要求盒子一定要有宽高 */
 /* 缺陷：兼容性要求 */
.box{
    box-sizing: border-box;
    background-color: pink;
    position:absolute;
	width:200px; //也可以没有宽
	height:100px; //也可以没有高
    left: 50%;
    top: 50%;
	transform: translate(-50%,-50%);
}

方法四 父盒子flex

 /* 优点：不需要盒子的确切宽高，也不要求盒子一定要有宽高 */
        /* 缺陷：兼容性要求 */
 .container{
		width:500px;
		height:300px;
		background-color: green;
	    display: flex;
        justify-content: center;
        align-items: center;
}
.box{
    box-sizing: border-box;
    background-color: pink;
    position:absolute;
	width:200px;
	height:100px;
}

方法五 父盒子table-cell + 行内块盒子(这块本人不研究，基本不用)

       /* 优点：不需要盒子的确切宽高，也不要求盒子一定要有宽高 */
        /* 缺陷：父盒子要有确切的宽高，不能是百分比；子盒子需要额外添加行内属性 */
        .container{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 600px; 
        }
        .box{
            display: inline-block;
        }

方法六 js动态设置 id可以直接获取页面相同的dom元素(这块本人用的极少，不过是JS式的，没啥难度)

  <script>
        let pW = container.clientWidth,
            pH = container.clientHeight,
            boxW = box.offsetWidth,
            boxH = box.offsetHeight;

        box.style.position = 'absolute';
        box.style.left = (pW - boxW)/2 + 'px'
        box.style.top = (pH - boxH)/2 + 'px'
    </script>

以上的实践摘自于

实现元素水平垂直居中的几种方式及各自优点和缺点 - 某个程序爱好者 - 博客园

版权声明
本文为[如花菇凉]所创，转载请带上原文链接，感谢
https://blog.csdn.net/u012174809/article/details/124361542

边栏推荐

猜你喜欢

随机推荐