当前位置：网站首页>Realize several "Postures" in which a box is horizontally and vertically centered in the parent box

Realize several "Postures" in which a box is horizontally and vertically centered in the parent box

2022-04-23 12:33:00 【As cool as mushrooms】

Truth is said a thousand times , Why don't you knock it yourself , Come on , Old fellow iron , Just review and deepen your impression .

Let's start with sample

<body>
   <div class="container" id="container">
      <div class="box" id="box"> I'm a sub 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>

The effect is as follows

  Method 1   Absolute positioning +margin negative 

 /*  defects ： You need to know the width and height of the box  */
.box{
    box-sizing: border-box;
    background-color: pink;
    position:absolute;
    width: 200px;
    height: 100px;
	left:50%;
	top:50%;
	margin-left:-100px;
	margin-top:-50px;
}

Method 2   Absolute positioning +margin:auto


        /*  advantage ： You don't need the exact width and height of the box  */
        /*  defects ： The box must be wide and high , Be short of one cannot , It won't work without one  */
.box{
    box-sizing: border-box;
    background-color: pink;
    position:absolute;
    width: 200px;
    height: 100px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    }

Method 3   Absolute positioning +translate()

/*  advantage ： You don't need the exact width and height of the box , There is no requirement that the box must be wide or high  */
 /*  defects ： Compatibility requirements  */
.box{
    box-sizing: border-box;
    background-color: pink;
    position:absolute;
	width:200px; // No, it's not 
	height:100px; // It can also not be high 
    left: 50%;
    top: 50%;
	transform: translate(-50%,-50%);
}

Method four   Parent box flex

 /*  advantage ： You don't need the exact width and height of the box , There is no requirement that the box must be wide or high  */
        /*  defects ： Compatibility requirements  */
 .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;
}

Method five   Parent box table-cell +  In line box ( I don't study this , Basically not )

       /*  advantage ： You don't need the exact width and height of the box , There is no requirement that the box must be wide or high  */
        /*  defects ： The parent box should have the exact width and height , It can't be a percentage ; The sub box needs to add additional inline attributes  */
        .container{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 600px; 
        }
        .box{
            display: inline-block;
        }

Methods six  js Dynamic setting id You can get the same page directly dom Elements ( This piece I use very little , But is JS Type , No difficulty. )

  <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>

The above practice is taken from

Several ways to realize the horizontal and vertical centering of elements and their respective advantages and disadvantages - A program enthusiast - Blog Garden

版权声明
本文为[As cool as mushrooms]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204231227335075.html

边栏推荐

猜你喜欢

随机推荐