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及以下的版本中是无效的。
