CSS居中对齐

来源：互联网发布：ubuntu 12.04 dns 编辑：程序博客网时间：2024/06/04 00:35

一、文本居中

利用下面的html代码演示文本居中，也可以到这里在线研究。

[html] view plaincopy
<div class="outerBox">  
  center text   
</div>  

1.text-align实现文字水平居中

对div.outerBox设置text-align:center实现(emmet中简写:tac)

[css] view plaincopy
.outerBox{  
  width:200px;  
  height:100px;  
  border: 1px solid #000;  
  text-align:center;  /*水平居中*/  
}  

2.line-height与height等高实现单行文本垂直居中

对div.outerBox设置line-height与height等高

[css] view plaincopy
.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元素，因此之前需要转化。

[css] view plaincopy
.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居中对齐，点这里在线研究代码。

[html] view plaincopy
<div class="outerBox">  
  <div class="innerBox"></div>  
</div>  

css中实现outerBox、innerBox父子盒子的宽高背景色。

[css] view plaincopy
*{  
  -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实现水平居中

[html] view plaincopy
<div class="outerBox marginAuto">  
  <div class="innerBox">marginAuto</div>  
</div>  

当div.innerBox拥有固定宽度时，设置水平方向margin为auto，可以实现水平居中。

[css] view plaincopy
/*margin:auto实现水平居中，需要居中的div必须拥有固定的宽度*/  
.marginAuto .innerBox{  
  margin: 0 auto;  
}  

2.text-align:center实现水平居中

[html] view plaincopy
<div class="outerBox textAlignCenter">  
  <div class="innerBox">textAlignCenter</div>  
</div>  

如果给子盒子div.innerBox设置为inline-block不影响整体布局时，我们可以将子盒子转化为inline-block，对父盒子设置text-align:center实现居中对齐。

[css] view plaincopy
/* 
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实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构。

[html] view plaincopy
<div class="outerBox tableCell">  
  <div class="ok">  
    <div class="innerBox">tableCell</div>  
  </div>  
</div>  

css设置是这样的。

[css] view plaincopy
/* 
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偏移

[html] view plaincopy
<div class="outerBox AbsolutePosition">  
    <div class="innerBox">AbsolutePosition</div>  
</div>  

将outerBox设置成定位元素(利用position:relative实现)，将innerBox设置成绝对定位，left和top均为50%，这时子盒子的左上角居中对齐，如果我们需要实现利用margin实现偏移。

[css] view plaincopy
/*AbsolutePosition绝对定位实现居中*/  
.AbsolutePosition{  
  position: relative;  
}  
.AbsolutePosition .innerBox{  
  position: absolute;  
  left:50%;  
  top:50%;  
  margin-left:-100px; /*利用margin实现偏移,设置为宽度和高度的一半的负值*/  
  margin-top:-25px;  
}  

5.绝对定位居中，利用transform偏移

[html] view plaincopy
<div class="outerBox AbsolutePositionWithTransform">  
    <div class="innerBox">Absolute Position with Transform</div>  
</div>  

绝对定位方式同方法4，只不过利用transform中的translate实现偏移。

[css] view plaincopy
/*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偏移

[html] view plaincopy
<div class="outerBox AbsolutePositionMarginAuto">  
    <div class="innerBox">Absolute Position Margin auto</div>  
</div>  

同样的对子盒子实现绝对定位，这里使用top、right、bottom、left均为0，margin为auto实现偏移。

[css] view plaincopy
/*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居中

[html] view plaincopy
<div class="outerBox flexBox">  
    <div class="innerBox">flexBox</div>  
</div>  

使用弹性盒模型(flexbox)实现居中

[css] view plaincopy
/*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计算位置

[html] view plaincopy
<div class="outerBox calc">  
    <div class="innerBox">calc</div>  
</div>  

对子盒子实现绝对定位，利用calc计算位置

[css] view plaincopy
/*绝对定位，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);  
}  

完工！希望对您有所帮助，欢迎拍砖。

0 0