CSS居中对齐

来源：互联网发布：erp企业管理系统源码编辑：程序博客网时间：2024/06/18 18:20

一、文本居中

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

1<div class="outerBox">
2  center text
3</div>

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

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

1.outerBox{
2  width:200px;
3  height:100px;
4  border:1px solid #000;
5  text-align:center; /*水平居中*/
6}

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

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

1.outerBox{
2  width:200px;
3  height:100px;
4  border:1px solid #000;
5  text-align:center;/* 水平居中 */
6  line-height:100px; /* line-height=height */
7}

3.vertical-align实现文本的垂直居中

可以使用vertical-align实现垂直居中，不过vertical-align仅适用于内联元素和table-cell元素，因此之前需要转化。

1.outerBox{
2  width:200px;
3  height:100px;
4  border:1px solid #000;
5  text-align:center;/* 水平居中 */
6  display:table-cell;/*转化成table-cell元素*/
7  vertical-align:middle; 
8  /*垂直居中对齐，vertical-align适用于内联及table-cell元素*/
9}

二、div居中

利用下面代码演示div居中对齐，点这里在线研究代码。

1<div class="outerBox">
2  <divclass="innerBox"></div>
3</div>

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

01*{
02  -webkit-box-sizing: border-box;
03  -moz-box-sizing: border-box;
04  box-sizing: border-box;
05}
06.outerBox{
07  width:500px;
08  height:120px;
09  background-color:#45A437;
10  margin:20px;
11}
12.innerBox{
13  width:200px;
14  height:50px;
15  background-color:#7CC02B;
16}

1.margin:auto实现水平居中

1<div class="outerBox marginAuto">
2  <divclass="innerBox">marginAuto</div>
3</div>

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

1/*margin:auto实现水平居中，需要居中的div必须拥有固定的宽度*/
2.marginAuto .innerBox{
3  margin:0 auto;
4}

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

1<div class="outerBox textAlignCenter">
2  <divclass="innerBox">textAlignCenter</div>
3</div>

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

01/*
02text-align: center;实现水平居中
03需要子盒子设置为display: inline-block;
04*/
05.textAlignCenter{
06  text-align:center;
07}
08.textAlignCenter .innerBox{
09  display: inline-block;
10}

3.table-cell元素居中

将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构。

1<div class="outerBox tableCell">
2  <divclass="ok">
3    <divclass="innerBox">tableCell</div>
4  </div>
5</div>

css设置是这样的。

01/*
02table-cell实现居中
03将父盒子设置为table-cell元素，设置
04text-align:center,vertical-align: middle;
05子盒子设置为inline-block元素
06*/
07.tableCell{
08  display: table;
09}
10.tableCell .ok{
11  display:table-cell;
12  text-align:center;
13  vertical-align:middle;
14}
15.tableCell .innerBox{
16  display: inline-block;
17}

4.绝对定位居中，margin偏移

1<div class="outerBox AbsolutePosition">
2    <divclass="innerBox">AbsolutePosition</div>
3</div>

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

01/*AbsolutePosition绝对定位实现居中*/
02.AbsolutePosition{
03  position:relative;
04}
05.AbsolutePosition .innerBox{
06  position:absolute;
07  left:50%;
08  top:50%;
09  margin-left:-100px;/*利用margin实现偏移,设置为宽度和高度的一半的负值*/
10  margin-top:-25px;
11}

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

1<div class="outerBox AbsolutePositionWithTransform">
2    <divclass="innerBox">Absolute Position with Transform</div>
3</div>

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

01/*AbsolutePosition绝对定位实现居中,transform偏移*/
02.AbsolutePositionWithTransform{
03  position:relative;
04}
05.AbsolutePositionWithTransform .innerBox{
06  position:absolute;
07  left:50%;
08  top:50%;
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%);
14}

6.绝对定位居中，利用margin:auto偏移

1<div class="outerBox AbsolutePositionMarginAuto">
2    <divclass="innerBox">Absolute Position Margin auto</div>
3</div>

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

01/*AbsolutePosition绝对定位实现居中,margin:auto实现偏移*/
02.AbsolutePositionMarginAuto{
03  position:relative;
04}
05.AbsolutePositionMarginAuto .innerBox{
06  position:absolute;
07  left:0;     /*top、right、bottom、left均为0*/
08  top:0;
09  right:0;
10  bottom:0;
11  margin:auto;
12}

7.Flexbox居中

1<div class="outerBox flexBox">
2    <divclass="innerBox">flexBox</div>
3</div>

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

01/*flexbox实现居中*/
02.flexBox{
03  display: -webkit-box;/* OLD: Safari, iOS 6 and earlier; Android browser, older WebKit */
04  display: -moz-box;/* OLD: Firefox (can be buggy) */
05  display: -ms-flexbox;/* OLD: IE 10 */
06  display: -webkit-flex;/* FINAL, PREFIXED, Chrome 21+ */
07  display: flex;/* FINAL: Opera 12.1+, Firefox 22+ */
08  -webkit-box-align:center;
09  -moz-box-align:center;
10  -ms-flex-align:center;
11  -webkit-align-items:center;
12  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;
18}

8.calc计算位置

1<div class="outerBox calc">
2    <divclass="innerBox">calc</div>
3</div>

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

01/*绝对定位，clac计算位置*/

02.calc{

03 position:relative;

04}

05.calc .innerBox{

06 position:absolute;

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);

13}

0 0