CSS中有关水平居中和垂直居中的解决办法

CCS中让div等块级元素在父级元素中居中的方法：

（1）div{  margin：0 auto   }

该方法只能实现水平的居中，无法实现元素的垂直居中

（2）当div元素的宽高是固定的，然后设置位置为绝对位置absolute，左边框和上边框的距离设置为50%，这个50%就是指具有定位为absolute或者是relative的祖元素的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。：

. parent{

position：relative；

}

div{

left:  50%;

right:50%;

width:400px;

height:400px;

margin:-200px 0 0 -200px;

position：absolute；

}

（3）当高度不固定时：

a、使用padding的填充方式。使上下，左右分别填充相同的量即可实现居中

.parent{
       padding:25px;
    }
  这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

b、元素的高度未知时：

.parent {

  position: relative;

   }

.child {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  }

C、利用display：flex

  .parent {

  display: flex;

  flex-direction: column;

  justify-content: center;}

（3）jQuery实现水平和垂直居中

jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS，获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置DIV的CSS，代码如下：

$(window).resize(function(){

$(".mydiv").css({

position: "absolute",

left: ($(window).width() - $(".mydiv").outerWidth())/2,

top: ($(window).height() - $(".mydiv").outerHeight())/2

});        });

此外在页面载入时，就需要调用resize()。

$(function(){

$(window).resize(); });

此方法的好处就是不需要知道DIV的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的弹出层效果中应用。

CSS中让文字等行内（inline-*）元素居中的方法：

一、水平居中

（1）text-align:center（通常用于inline-block、inline-table、inline-flex/inline等）

（2）margin：0 auto通常用于块级元素，一个或者一列块级元素均可以只是对元素本身进行居中不居中文字。

（3）当有行多列元素需要进行居中显示时需要借助dispaly属性来实现。

二、垂直居中

CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中 的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是 没有valign特性的，因此使用vertical-align对它们不起作用

（1）一个容器中只有一行文字，利用line-height,设置其值和height一样，当有多行文字时会出现不同行文字之间也有行距，所以其只适合于单行文字的情况。

{

text-align:center;

Height:20px;

Line-height:20px;

overflow:hidden;//使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

}

（2）多行未知高度文字的垂直居中

a、当容器中有行文字内容时，使用line-height达不到想要的效果时可以考虑使用padding的填充方式。使上下，左右分别填充相同的量即可实现居中

div {
       padding:25px;
    }
  这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

（3）  多行文本固定高度的居中
   在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS 中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table> 就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素
上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

<div id=”wrap”><div id=”content”></div></div>

div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}

这个方法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet
Explorer 6及以下的版本中是无效的。