水平居中与垂直居中

欢迎访文我的博客YangChen’s Blog

水平居中和垂直居中可以说是开发中经常遇到的问题，网上搜索水平居中和垂直居中后会有很多方法，有的方法并不是很好，所以结合自己的开发经验，总结下几个个人常用的水平居中和垂直居中方法。

水平居中

行内元素或类行内元素水平居中

块级父元素当中让行内子元素居中，只需要text-align:center即可,对一些类行内元素，如inline、inline-block等同样适用。

一种常用的处理分页标签居中的方式就是给子元素设置display:inline-block它的父元素设置成text-align:center

块元素水平居中

块元素水平居中常用的方法就是设置固定宽度，margin值设为auto即

.wrap {
    width:1000px;
    margin: 0 auto;
}

此方式缺点就是宽度是固定的，不能自由伸缩

浮动元素水平居中

是的浮动元素宽度自适应的水平居中，此方法来自Matthew James Taylor写的《Horizontally Centered Menus with no CSS hacks》一文，并且引用其文中演示的示意图。
先从原理讲起最后在贴代码吧

以分页为例，按照传统方法，li标签左浮动且ul左浮动后就会如下图所示

首先为centeredmenu这个div里设置上position:relative,然后再让ul向右移动50%，即left:50%，这样就能看到以下效果,整个分页向右移动了50%

紧接着为li标签定义上position:relative属性，让其移动方向相反，向左移动50%，即right:50%，这样就能看到如下效果,分页就水平居中啦

这个方法兼容性强，而且没有固定宽度的设置，拓展性也强实例代码如下：

#centeredmenu {
   float:left;
   width:100%;
   overflow:hidden;
   position:relative;
}
#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   position:relative;
   right:50%;
}

---

垂直居中

下面是垂直居中的几种方法

行内元素的垂直居中

这个方法很常见，对于一个单行文本的垂直居中，只要将line-height设置为元素高度即可，使用时注意浏览器hack，这个方法的局限就是只能是单行文本的

对于多行文本就要借助display:table了，因为用table做表格时，他的每一行都是垂直居中的，所以就借助这个来实现。示例代码如下

.center-table {
  display: table;
  height: 250px;
}
.center-table p {
  display: table-cell;
  vertical-align: middle;
}

块级元素垂直居中

子元素知道具体宽高的

.wrap {
  //父元素
}
第一个方法
.wrap .content {
  position: absolute;
  width: 100px;
  heigth: 100px;
  top: 50%;
  margin-top: -50px; //为高度的一半
}

这个方法就是设置top:50%后，这个块元素的最上边为垂直居中的位置，但是这样整体的内容并不是垂直居中，所以要设置margin-top: -50px; //为高度的一半，这样这个块元素又相对于自身最上面向上又移动了自身的50%，因此就垂直居中了。
第二个方法

.wrap {
  position: relative;
}
.wrap .content {
  position: absolute;
  heigth: 100px;
  margin: 0;
  bottom: 0;
  margin: auto;
}

子元素不知道具体宽高的

这种情况有三种方法

第一种借助table布局，与上面介绍的多行垂直居中方法一样。
第二种是借助translate的transform属性,示例如下:

.wrap {
  position: relative;
}
.wrap .content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这个方法与上面那个固定宽度垂直居中的思想可是一样的啊，有没有看出来？
第三种就是用flex布局，非常的简单,代码如下:

.wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

至于选择哪种方法好看情况吧，因为没有一种方法是万能，总有着各自的不足，也有着各自的优势。