一、文本居中
利用下面的html代码演示文本居中,也可以到这里在线研究。
1.text-align实现文字水平居中
对div.outerBox设置text-align:center实现(emmet中简写:tac)
4 | border : 1px solid #000 ; |
2.line-height与height等高实现单行文本垂直居中
对div.outerBox设置line-height与height等高
4 | border : 1px solid #000 ; |
3.vertical-align实现文本的垂直居中
可以使用vertical-align实现垂直居中,不过vertical-align仅适用于内联元素和table-cell元素,因此之前需要转化。
4 | border : 1px solid #000 ; |
二、div居中
利用下面代码演示div居中对齐,点这里
在线研究代码。
2 | < div class = "innerBox" ></ div > |
css中实现outerBox、innerBox父子盒子的宽高背景色。
02 | -webkit-box-sizing: border-box; |
03 | -moz-box-sizing: border-box; |
04 | box-sizing: border-box; |
09 | background-color : #45A437 ; |
15 | background-color : #7CC02B ; |
1.margin:auto实现水平居中
1 | < div class = "outerBox marginAuto" > |
2 | < div class = "innerBox" >marginAuto</ div > |
当div.innerBox拥有固定宽度时,设置水平方向margin为auto,可以实现水平居中。
2.text-align:center实现水平居中
1 | < div class = "outerBox textAlignCenter" > |
2 | < div class = "innerBox" >textAlignCenter</ div > |
如果给子盒子div.innerBox设置为inline-block不影响整体布局时,我们可以将子盒子转化为inline-block,对父盒子设置text-align:center实现居中对齐。
08 | .textAlignCenter .innerBox{ |
09 | display : inline- block ; |
3.table-cell元素居中
将父盒子设置为table-cell元素,可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构。
1 | < div class = "outerBox tableCell" > |
3 | < div class = "innerBox" >tableCell</ div > |
css设置是这样的。
13 | vertical-align : middle ; |
16 | display : inline- block ; |
4.绝对定位居中,margin偏移
1 | < div class = "outerBox AbsolutePosition" > |
2 | < div class = "innerBox" >AbsolutePosition</ div > |
将outerBox设置成定位元素(利用position:relative实现),将innerBox设置成绝对定位,left和top均为50%,这时子盒子的左上角居中对齐,如果我们需要实现利用margin实现偏移。
05 | .AbsolutePosition .innerBox{ |
5.绝对定位居中,利用transform偏移
1 | < div class = "outerBox AbsolutePositionWithTransform" > |
2 | < div class = "innerBox" >Absolute Position with Transform</ div > |
绝对定位方式同方法4,只不过利用transform中的translate实现偏移。
02 | .AbsolutePositionWithTransform{ |
05 | .AbsolutePositionWithTransform .innerBox{ |
09 | -webkit-transform: translate( -50% , -50% ); |
10 | -moz-transform: translate( -50% , -50% ); |
11 | -ms-transform: translate( -50% , -50% ); |
12 | -o-transform:translate( -50% , -50% ) ; |
13 | transform:translate( -50% , -50% ); |
6.绝对定位居中,利用margin:auto偏移
1 | < div class = "outerBox AbsolutePositionMarginAuto" > |
2 | < div class = "innerBox" >Absolute Position Margin auto</ div > |
同样的对子盒子实现绝对定位,这里使用top、right、bottom、left均为0,margin为auto实现偏移。
02 | .AbsolutePositionMarginAuto{ |
05 | .AbsolutePositionMarginAuto .innerBox{ |
7.Flexbox居中
1 | < div class = "outerBox flexBox" > |
2 | < div class = "innerBox" >flexBox</ div > |
使用弹性盒模型(flexbox)实现居中
06 | display : -webkit-flex; |
08 | -webkit-box-align: center ; |
09 | -moz-box-align: center ; |
10 | -ms-flex-align: center ; |
11 | -webkit-align-items: center ; |
13 | -webkit-box-pack: center ; |
14 | -moz-box-pack: center ; |
15 | -ms-flex-pack: center ; |
16 | -webkit-justify- content : center ; |
17 | justify- content : center ; |
8.calc计算位置
1 | < div class = "outerBox calc" > |
2 | < div class = "innerBox" >calc</ div > |
对子盒子实现绝对定位,利用calc计算位置
07 | left :-webkit-calc(( 500px - 200px )/ 2 ); |
08 | top :-webkit-calc(( 120px - 50px )/ 2 ); |
09 | left :-moz-calc(( 500px - 200px )/ 2 ); |
10 | top :-moz-calc(( 120px - 50px )/ 2 ); |
11 | left :calc(( 500px - 200px )/ 2 ); |
12 | top :calc(( 120px - 50px )/ 2 ); |