一、文本居中
利用下面的html代码演示文本居中，也可以到这里在线研究。
<div class="outerBox"> center text </div>
1.text-align实现文字水平居中
对div.outerBox设置text-align:center实现(emmet中简写:tac)
.outerBox{
width:200px;
height:100px;
border: 1px solid #000;
text-align:center; /*水平居中*/
}
2.line-height与height等高实现单行文本垂直居中
对div.outerBox设置line-height与height等高
.outerBox{
width:200px;
height:100px;
border: 1px solid #000;
text-align:center; /* 水平居中 */
line-height: 100px; /* line-height=height */
}
3.vertical-align实现文本的垂直居中
可以使用vertical-align实现垂直居中，不过vertical-align仅适用于内联元素和table-cell元素，因此之前需要转化。
.outerBox{
width:200px;
height:100px;
border: 1px solid #000;
text-align:center; /* 水平居中 */
display:table-cell; /*转化成table-cell元素*/
vertical-align:middle;
/*垂直居中对齐，vertical-align适用于内联及table-cell元素*/
}
二、div居中
利用下面代码演示div居中对齐，点这里在线研究代码。
<div class="outerBox"> <div class="innerBox"></div> </div>
css中实现outerBox、innerBox父子盒子的宽高背景色。
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.outerBox{
width:500px;
height: 120px;
background-color: #45A437;
margin: 20px;
}
.innerBox{
width: 200px;
height:50px;
background-color: #7CC02B;
}
1.margin:auto实现水平居中
<div class="outerBox marginAuto"> <div class="innerBox">marginAuto</div> </div>
当div.innerBox拥有固定宽度时，设置水平方向margin为auto，可以实现水平居中。
/*margin:auto实现水平居中，需要居中的div必须拥有固定的宽度*/
.marginAuto .innerBox{
margin: 0 auto;
}
2.text-align:center实现水平居中
<div class="outerBox textAlignCenter"> <div class="innerBox">textAlignCenter</div> </div>
/*
text-align: center;实现水平居中
需要子盒子设置为display: inline-block;
*/
.textAlignCenter{
text-align: center;
}
.textAlignCenter .innerBox{
display: inline-block;
}
3.table-cell元素居中
将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构。
<div class="outerBox tableCell">
<div class="ok">
<div class="innerBox">tableCell</div>
</div>
</div>css设置是这样的。/*
table-cell实现居中
将父盒子设置为table-cell元素，设置
text-align:center,vertical-align: middle;
子盒子设置为inline-block元素
*/
.tableCell{
display: table;
}
.tableCell .ok{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.tableCell .innerBox{
display: inline-block;
}
4.绝对定位居中，margin偏移
<div class="outerBox AbsolutePosition">
<div class="innerBox">AbsolutePosition</div>
</div>将outerBox设置成定位元素(利用position:relative实现)，将innerBox设置成绝对定位，left和top均为50%，这时子盒子的左上角居中对齐，如果我们需要实现利用margin实现偏移。/*AbsolutePosition绝对定位实现居中*/
.AbsolutePosition{
position: relative;
}
.AbsolutePosition .innerBox{
position: absolute;
left:50%;
top:50%;
margin-left:-100px; /*利用margin实现偏移,设置为宽度和高度的一半的负值*/
margin-top:-25px;
}
5.绝对定位居中，利用transform偏移
<div class="outerBox AbsolutePositionWithTransform">
<div class="innerBox">Absolute Position with Transform</div>
</div>
绝对定位方式同方法4，只不过利用transform中的translate实现偏移。
/*AbsolutePosition绝对定位实现居中,transform偏移*/
.AbsolutePositionWithTransform{
position: relative;
}
.AbsolutePositionWithTransform .innerBox{
position: absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform:translate(-50%, -50%) ;
transform:translate(-50%, -50%);
}
6.绝对定位居中，利用margin:auto偏移
<div class="outerBox AbsolutePositionMarginAuto">
<div class="innerBox">Absolute Position Margin auto</div>
</div>同样的对子盒子实现绝对定位，这里使用top、right、bottom、left均为0，margin为auto实现偏移。
/*AbsolutePosition绝对定位实现居中,margin:auto实现偏移*/
.AbsolutePositionMarginAuto{
position: relative;
}
.AbsolutePositionMarginAuto .innerBox{
position: absolute;
left:0; /*top、right、bottom、left均为0*/
top:0;
right: 0;
bottom: 0;
margin: auto;
}
7.Flexbox居中
<div class="outerBox flexBox">
<div class="innerBox">flexBox</div>
</div>使用弹性盒模型(flexbox)实现居中/*flexbox实现居中*/
.flexBox{
display: -webkit-box; /* OLD: Safari, iOS 6 and earlier; Android browser, older WebKit */
display: -moz-box; /* OLD: Firefox (can be buggy) */
display: -ms-flexbox; /* OLD: IE 10 */
display: -webkit-flex; /* FINAL, PREFIXED, Chrome 21+ */
display: flex; /* FINAL: Opera 12.1+, Firefox 22+ */
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}8.calc计算位置<div class="outerBox calc">
<div class="innerBox">calc</div>
</div>对子盒子实现绝对定位，利用calc计算位置/*绝对定位，clac计算位置*/
.calc{
position: relative;
}
.calc .innerBox{
position: absolute;
left:-webkit-calc((500px - 200px)/2);
top:-webkit-calc((120px - 50px)/2);
left:-moz-calc((500px - 200px)/2);
top:-moz-calc((120px - 50px)/2);
left:calc((500px - 200px)/2);
top:calc((120px - 50px)/2);
}完工！希望对您有所帮助，欢迎拍砖。
---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------