元素居中问题

2017-11-22

前言

写这篇文章时是2017年节气中的小雪，所以放了一张雪景的照片。虽然下雪很冷，但是因为是来杭州的第一年，所以还是想去看看西湖断桥的雪景的。言归正传，作为初学者的我发现元素居中问题在写页面时会时常遇到，并且发现有很多种方法实现元素居中，现在先总结目前知道的实现方法。

注意：这里的居中指的是水平方向和垂直方向都要居中。

一、块级元素中的行内元素如何居中？

1.一行文字居中

1 2	text-align: center; /水平方向/ line-height: height; /垂直方向/

2.多行文字居中

当然，这里指的是一个行内标签内通过<br/>组成的多行文字,这是一个比较奇特的思路，来源于鑫生活,鑫空间 ,具体哪篇文章我忘记了。

<style>
    .test {
    	line-height: 150px;
    	border: 1px dashed #cccccc;
    	padding-left: 5px;
        text-align: center;
    }
    .test span {
        display: inline-block;
        line-height: 1.4em;
        vertical-align: middle;
    }
</style>
<p class="test">
<span style="font-size:20px;">这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br />这里是第二行，用来测试多行的显示效果。</span>
</p>

二、块级元素中的行内块元素如何居中？

在实际应用中，img和input等行内块元素可以变成块级元素后，利用第三种情况的方法更加方便。

方法一、利用text-alin和行高

水平方向

1	text-align: center;

垂直方向

1 2	1.父元素设置行高等于高度； 2.img标签设置vertical-align: middle。

完整代码：

<style>
 .dv{
     width: 200px;
     height: 200px;
     border: 1px solid #000;
     text-align: center;   /*水平方向居中*/
     line-height: 200px;  /*垂直方向居中*/
  }
  .dv img{
     vertical-align: middle;   /*垂直方向居中*/
   }
</style>
<div class="dv">
    <img src="img/newsAvatar01.png" alt="">
</div>

方法二、利用transform

<div class="box">
    <img src="img/newsAvatar01.png" alt="">
</div>
<style>
	  .box{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        .box img{
            width: 50px;
            height: 50px;
            position: relative;   /*relative不会让元素脱离文档流*/
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
</style>

三、块级元素中的块级元素如何居中？

img、input等行内块元素变为块级元素的方法有很多，比如浮动、添加属性display: block；、绝对定位等。

因为之前已经说了，img标签一般会让它变成块级元素居中，所以这里大都以img为例。

方法一：不用设置top、left具体数值，让元素水平垂直居中（定位、margin: auto;很重要）

<div class="box">
    <img src="img/newsAvatar01.png" alt="">
</div>
<style>
	  .box{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            position: relative;
        }
        .box img{
            width: 50px;
            height: 50px;
            vertical-align: middle;
            position: absolute;  /*绝对定位*/
            top:0;
            bottom:0;
            left:0;
            right: 0;
            margin: auto;
        }
</style>

方法二：需要设置外边距具体数值的情况下，让元素水平、垂直居中(让top和left值为50%，之后设置外边距为负的该元素宽高的一半 );

<div class="box">
    <img src="img/newsAvatar01.png" alt="">
</div>
<style>
	  .box{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            position: relative;
        }
        .box img{
            width: 50px;
            height: 50px;
            vertical-align: middle;
            position: absolute;   /*绝对定位*/
            top:50%;
            margin-top: -25px;
            left:50%;
            margin-left: -25px;  
        }
</style>

方法三：不用知道元素的宽高，让元素水平垂直居中（和方法二相似只不过后面使用的是transform）

该方法就是第二种情况中的方法二，也就是说这种方法既可以使行内块元素居中，也可以使块级元素居中。

<div class="outer">
    <div class="inner"></div>
</div>
<style>
    .outer{
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
    .inner{
        width: 50px;
        height:50px;
        background-color: salmon;
        position: relative;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
</style>

方法四：不用设置top、left具体数值，让元素水平垂直居中

注意：img必须是块级元素，margin:auto;才会起作用，但为什么对垂直方向不起作用？还在努力研究中。

<div class="box">
    <img src="img/newsAvatar01.png" alt="">
</div>
<style>
      .box{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        .box img{
            display: block;  /*转换为块级元素*/
            width: 50px;
            height: 50px;
            margin: auto;  
            margin-top: 25%;
            margin-bottom: 25%;
        }
</style>

方法五：利用flex让元素水平垂直居中

<div class="box">
    <img src="img/newsAvatar01.png" alt="">
</div>
<style>
	  .box{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            display: flex;
        }
        .box img{
            width: 50px;
            height: 50px;
            flex: 0 0 auto;
            margin: auto;
        }
</style>