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

详解"/>

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

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

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%;}

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

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

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

想要深入学习flex的话，可以参考下面这个
.html