CSS居中对齐

红太狼 2022-08-26 08:10 272阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

## 一、文本居中 ##

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

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

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>

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

/*
    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计算位置 ###

对子盒子实现绝对定位，利用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][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Link 1]: http://codepen.io/whqet/pen/eKrky
[Link 2]: http://codepen.io/whqet/pen/GkFxw/
[whqet]: http://blog.csdn.net/whqet