垂直和水平居中方法小结

Posted 2020-09-28 wzzkaifa

水平居中

行内元素

text-align:center;

块元素

1.定宽块元素水平居中

 margin:0 auto;

2.不定宽块元素水平居中

方法一：利用浮动的包裹性和百分比相对定位

<div class=‘outer‘>
   <div class=‘inner‘></div>
</div>

我们想要使inner(不定宽)水平居中于outer，能够这么做：
先在inner外面再加一层div:

<div class=‘outer‘>
   <div class=‘wrap‘>
      <div class=‘inner‘></div>
   </div>
</div>

起初盒子是这种：

CSS这么写：

.wrap{
   float:left;
   position:absolute;
   left:50%;
}
.inner{
   position:relative;  //为啥用absolute没用啊
   left:-50%;
}

wrap设置为float的原因是形成包裹。把inner包裹住。此时浮动元素wrap的宽和高都是有内部元素inner撑开的。不再是占满整行。

也就是说wrap的宽和inner的宽相等。

position:relative设置百分比意思是相对于父元素宽度的百分之几。此时，wrap的左边缘距离outer的左边缘是outer.width的一半，也就是说wrap的左边缘在outer的中线上。

可是我们想要inner的中线和outer的中线重叠，那么就须要inner再往左移动它自身宽度的一半，可是它自身的宽度不知道啊，这就是为什么须要再加一层wrap且wrap要浮动（包裹）的原因。可依据“relative设置百分比意思是相对于父元素宽度的百分之几”这个规则。

因为wrap的宽度和inner的相等，50%就是inner的宽度的50%。

这种方法也有缺点。因为wrap浮动了。应该清除浮动。

方法二：将要居中的元素放到table的一个td标签中
原因是table不是块元素。它不会占满整行，其宽度是由内容来撑开的。此时能够设置table的

margin：0 auto;`

就可以。
缺点是添加了无语义标签。

方法三 改变块元素属性为inline或者inline-block
这样其父元素就能够使用text-align:center居中内部元素

垂直居中

单行文本

设置父元素的height和line-height相等。

父元素高度确定的多行文本、图片、块元素

方法一：
将要垂直居中的元素放到table的td中，然后对td设置：

verticle-align:middle;

事实上默认就是这样。verticle-align仅仅适用于 inline level, inline-block level 及 table-cells 元素上。

方法二：
在chrome、firefox 及 IE8 以上的浏览器下能够设置块级元素的 display 为 table-cell，激活 vertical-align 属性。但注意 IE6、7 并不支持这个样式。能够不用table-row这一层，直接外层table。内层table-cell就能实现内层元素中的内容垂直居中。比如以下的toCenter想要在box中垂直居中。须要设置box为table-cell。这样就能够激活其vertical-align：

<div class="box">
  <div class="toCenter">
       我想要在父元素中垂直居中显示
  </div>
</div>

.box{display: table-cell;width:200px;height:200px;background: pink;vertical-align: middle;}
.toCenter{width:100px;height:100px;background: purple;}

缺点：ie6和ie7并不支持display:table-cell。

方法三：要居中的元素高度确定
1.利用定位

<div class="outer">
   <div class="inner"></div>
</div>

CSS代码为：

.outer{
    background:#FFCCCC;
    border:1px solid #000;
    position:relative;  
}

.inner{
    width:100px;
    height:100px;
    background:#CCFF66;
    position:absolute;
    top:50%;  //父元素高度的一半
    margin-top:-50px;  //上移自身高度的一半             
}

为啥垂直居中不能够像水平居中方法一一样啊？

.inner{
    position:relative; 
    top:-50%;
}

没实用?

??

2.在要居中元素之前加入一个浮动块，再设置该块的margin-bottom

<div class="box">
  <div class="floater"></div>
  <div class="toCenter">
     我想要在父元素中垂直居中显示
  </div>
</div>

.box{width:500px;height:500px;}
.toCenter{width:100px;height:100px;position: relative;clear: both} //清除浮动
.floater{height: 50%;float:left;margin-bottom: -50px}//下边距为 -要居中元素高度的一半

方法四 父元素的上下padding值设为一样
当父元素的高度未设置时，将父元素的上下padding值设置为一样就能够让其内部的块元素垂直方向上看上去居中了。

方法五

.box{position:relative;}
.toCenter{
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
    height:240px; 
    width:70%; 
}

方法六 使用box属性
父元素设置：

display:box;
box-align:center;  //将剩余空间均分到子元素上下两側

參考资料：
未知宽度水平居中的几种方法
CSS实现垂直居中的5种方法

待看资料: CSS 元素垂直居中的 6种方法