CSS居中对齐

当前位置 : 首页 > 网页制作 > CSS > CSS居中对齐

CSS居中对齐

来源: 作者: 时间:2016-01-25 10:02
一、文本居中利用下面的html代码演示文本居中,也可以到这里在线研究。 center text 1 text-align实现文字水平居中对div outerBox设置text-align:center实现(emmet中简写:tac) outerBox{ widt

一、文本居中

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

center text

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居中对齐,点这里在线研究代码。

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实现水平居中

marginAuto

当div.innerBox拥有固定宽度时,设置水平方向margin为auto,可以实现水平居中。
/*margin:auto实现水平居中,需要居中的div必须拥有固定的宽度*/
.marginAuto .innerBox{
  margin: 0 auto;
}

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

textAlignCenter
如果给子盒子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实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构。
tableCell
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偏移

AbsolutePosition
将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偏移

Absolute Position with Transform
绝对定位方式同方法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偏移

Absolute Position Margin auto
同样的对子盒子实现绝对定位,这里使用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居中

flexBox
使用弹性盒模型(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
对子盒子实现绝对定位,利用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,关注开发技术,分享网页相关资源。
---------------------------------------------------------------

Tag:
网友评论

<