web前端面试水平垂直居中详解

比眉伴天荒 2022-06-13 03:23 200阅读 0赞

1.行内元素的水平垂直居中；通过在父元素中设置text-align，让子元素的文本进行居中；然后通过line-height属性让子元素的行高等于父元素的高度。

<div id="div1">
        <label id='divSpan'>行内元素水平垂直居中</label>
    </div>
        #div1{
    		background: #ccc;
    		height: 200px;
    		text-align: center;
    	}
    	#divSpan{
    		line-height: 200px;
    	}

![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNjI2MTAxNzUzMzIx]

2.不定宽高父元素时的块级元素的水平垂直居中（最常用）；通过postition:absolute进行绝对定位，然后用百分比设置top和left；再用margin-left和margin-top消除子元素宽高的一半偏移量。

<div id="div1">
     <img id="divImg" src="230.jpg" style="width: 50px;height: 50px">
    </div>
        #div1{
    		position: relative;
    		height: 200px;
    		background: #ccc;
    	}
    	#divImg{
    		position: absolute;
    		margin-left: -25px;
    		margin-top: -25px;
    		left: 50%;
    		top: 50%;
    	}

![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNjI2MTAzOTIwOTAx]

3.定宽高父元素时的块级元素的水平垂直居中；通过margin-left和margin-top两个属性然后加以计算即可。

<div id="div1">
     <img id="divImg" src="230.jpg" style="width: 50px;height: 50px">
    </div>
        #div1{
    		height: 200px;
    		width: 500px;
    		background: #ccc;
    	}
    	#divImg{
    		border: 20px solid red;
    		margin-left: 205px;
    		margin-top: 55px;
    	}

![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNjI2MTA1NzA5ODIy]

4.不定宽高父元素时的块级元素的水平垂直居中（常用）；通过flex属性和margin:auto即可实现，可以解决不少布局上的问题。

<div id="main">
    	<div id="mainDiv">
    		<img src="640.jpg" style="height: 100px;width: 100px;">
    	</div>
    </div>
        #main{
    		height: 300px;
    		display: flex;
            background: black;
    	}
    	#mainDiv{
    		margin:auto ;
    	}

![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNjI2MTE1MjMyMTU2]

4.1复杂一点点的flex布局水平垂直居中。

<div class="container">
        <div class="item">Item 1</div>
        <div class="item2">
        <img src="640.jpg" style="width: 80%;height: 80%">
        </div>
        <div class="item3"><p>Item 3</p></div>
        <div class="item">Item 4</div>
        <div class="item">Item 6</div>
      </div>
        .container {
          height: 300px;
          background-color: lavender;
          display: flex;
          flex-wrap: wrap;
        }
    
        .item {
          background-color: cornflowerblue;
          width: 100px;
          height: 50px;
          margin: auto;
          text-align: center;
          line-height: 50px;
        }
        .item2{
          background-color: cornflowerblue;
          width: 100px;
          height: 50px;
          margin: auto;
          text-align: center;
          vertical-align: middle;
          display: table-cell;
        }
        .item2 img{
        	display: inline-block;
        	margin-top: 5%;
    
        }
        .item3 {
          background-color: cornflowerblue;
          width: 100px;
          height: 50px;
          margin: auto;
          text-align: center;
        }

![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNjI2MTIyOTI2Mjc2]  
想要深入学习flex的话，可以参考下面这个  
[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]

[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNjI2MTAxNzUzMzIx]: /images/20220613/d273a41935d14457b2a115037fea20d2.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNjI2MTAzOTIwOTAx]: /images/20220613/d62a840a48a54a17907e0657e8c13d0c.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNjI2MTA1NzA5ODIy]: /images/20220613/7079187195cc423da77606bad0aa8806.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNjI2MTE1MjMyMTU2]: /images/20220613/2ffef98432644e21bcd1c8ed03f1a58d.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNjI2MTIyOTI2Mjc2]: /images/20220613/ccfbafc6c9734e6c8bf029762f734d5b.png
[http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html