标签：标签 反向 左右 添加 height class table line 尺寸
一、水平居中
1）如果是行内元素，需要在它的父元素上设置text-align: center;
2）如果是块元素，直接设置元素的css属性text-align: center;
或则可以定宽再加上margin:0 auto;
p{
width: 300px;
margin:0 auto;
}
p{margin:auto;}
二、垂直居中
垂直居中的时候情况会比较多，根据不同的情况分别有下列几种方法
1）表格布局法------不用知道需要居中的元素是什么东西
利用表格的vertical-align属性，当然首先将父元素的显示方式设置为表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.content,.content2{
border: 1px solid #1369C0;
height: 300px;
width: 300px;
margin:0 auto;
text-align: center;
display: table;
}
.content span,.content2 .wrap{
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="content">
<span>元素垂直居中</span>
</div>
<div class="content2">
<div class="wrap"><img src="img/collection.png" /></div>
</div>
</body>
</html>
对于图片，我们需要在它的外面加上一层包裹，否则它不会居中，而有的不需要，所以，为了方便或则统一，我们需要在要居中的元素外层再添加一层包裹，如上面的.wrap,好处是不用知道需要居中的元素是什么东西，比如上面的img标签，在css中未对其位置进行任何设置。
二、伪元素法
具体思路是给居中元素的包裹层加一个伪元素（:before或则:after），content为空，使其高度为包裹元素的100%，然后设置该元素和居中元素的dispaly属性为inline-block,同时vertical-align:middle。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
.content,.content2{
border: 1px solid #1369C0;
height: 300px;
width: 300px;
margin:0 auto;
text-align: center;
}
.content:before,.content2:before{
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
.content p{
display: inline-block;
}
</style>
</head>
<body>
<div class="content">
<p>元素垂直居中</p>
</div>
<div class="content2">
<img src="img/collection.png" />
</div>
<p>块元素水平居中</p>
</body>
</html>
3、基于绝对定位的方法--------需要知道先知道居中的元素是哪一个
1）定宽、定高的元素（绝对定位+负的外边距）
实现原理：先把要居中的元素的左上角放在已定位祖先元素的正中心，然后再利用负外边距把它向左、向上移动（移动距离相当于自身宽高的一半），从而把元素的正中心放置在祖先元素的正中心。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
.content,.content2{
border: 1px solid #1369C0;
height: 300px;
width: 300px;
margin:0 auto;
text-align: center;
position: relative;
}
.ele{
position: absolute;
width: 100px;
height: 30px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -15px;
}
</style>
</head>
<body>
<div class="content">
<div class="ele">元素垂直居中</div>
</div>
<div class="content2">
<div class="ele">
<img src="img/collection.png" />
</div>
</div>
<p>块元素水平居中</p>
</body>
</html>
在设置CSS定位的时候也可以借助CSS3中强大的calc()函数
2）定宽、定高的元素（绝对定位+margin:auto）
实现原理：利用css定位规则，设置左右、上下方向定位为0，margin为auto，让css根据定位计算margin值，用hack的方式实现居中。居中块的尺寸需要固定.
代码和上面一样，改动.ele即可
.ele{
position: absolute;
width: 100px;
height: 30px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
3) 绝对定位+transform反向偏移 (不需要定宽和定高)
使用这种方法对于居中元素宽高没有要求的原因是在translate()变形函数中使用百分比时，是以这个元素本身的宽度和高度为基准进行换算和移动的。
只需要将1）中得margin换掉即可。
.ele{
position: absolute;
top: 50%;
left: 50%;
transform: translate(50%);
}
4、Flex布局模型法
.content,.content2{
border: 1px solid #1369C0;
height: 300px;
width: 300px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
5、单行文本居中
设置height与line-height的值一样
类似于上面的table法和flex法都可以。
标签：标签 反向 左右 添加 height class table line 尺寸
原文地址：http://www.cnblogs.com/jiayuexuan/p/7236672.html
