标签：
关于css完全居中的文章，网上已经很多了。这里主要记录一下思路，方便记忆，最后附上所有的参考链接。
1 水平居中
1 内部是内联元素，那么我们直接可以在父元素上面设置，text-align:center。
2 有多个内联元素，排成一排，实现水平居中。
html代码：
<div class="container"> <div>1</div> <div>2</div> <div>3</div> </div>
css代码：
.container { width: 800px; height: 200px; border: 3px solid #e5e5e5; text-align:center; font-size:0; //避免子元素设置成display:inline-block时，产生几像素的间隙 } .container div { font-size:16px; //恢复，div里面的字体大小为0. width: 100px; height: 50px; border: 1px solid red; display: inline-block; }
那么这里就实现了，几个内联元素同排居中的效果。
当然我们也可以用flex布局来实现，只需要在父容器中添加两行代码
display: flex;
justify-content: center;
至于flex布局，大家可以看看这篇文章
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
3 第三种就是如果里面是跨级元素 那么我们一般最常用的就是
margin-left: auto;
margin-right: auto;
垂直居中
1 块级元素里面的内联元素，如果只有单行，我们设置line-height的值等于父元素的高度，缺点就是只能用在单行上面。
2 块级元素里面的块级元素居中 如果知道子元素的宽高，那么我们用负的margin来实现，因为所有浏览亲都支持，这个属性。
<div class="container"> <div class="cneter2">知道宽高</div> </div>
.container{ width:800px; height:200px; border:3px solid #e5e5e5; position: relative; } .container div { width: 100px; height: 50px; } .cneter2{ position: absolute;; top: 50%; left: 50%; margin-left: -50px; //这个值为子元素宽度的一般 margin-top: -25px //这个值为子元素高度的一般
}
当然你也可以利用calc属性，减少两个属性，当然是否支持，也是你需要考虑的，还有"-"左右两边一定要有一个空格。
.cneter2{ position: absolute;; top: calc(50% - 25px); left: calc(50% - 50px); }
在不知道子元素具体宽高的情况下
.center1{ position: absolute; top: 50%; left: 50%; background: yellow; transform: translate(-50%,-50%); }
标签：
原文地址：http://www.cnblogs.com/djlxs/p/5726728.html
