html⽂本⾃动居中对齐,css实现⽂本和div居中对齐详细讲解⽰
例
1. ⽂本居中
⾸先编写⼀个简单的html代码，设置⼀个类名为parentDiv的div对象。html代码如下：
复制代码代码如下:
这⾥随意填写~...
.1 实现⽂字⽔平居中(使⽤text-align)
对div.parentDiv设置text-align: center；来实现。CSS代码如下：
复制代码代码如下:
[css]
.parentDiv {
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /*⽔平居中*/
}
有些时候，你会发现即使使⽤了text-align: center；属性，但是仍然没有起到居中的作⽤。原因就在于div标签本⾝没有定义⾃⼰居中的属性，⽽且这样做对布局是⾮常不科学的⽅法。正确的设置⽅法其实很简单就是给.parentDiv添加以下属性：margin-left: auto；和margin-right: auto；即可。具体可看2.1。
注：在⽗级元素定义text-align: center；属性的意思就是在⽗级元素内的内容居中；对于IE浏览器这样设置就没问题了，但在Mozilla浏览器中却不⾏。解决办法就是：在⼦元素定义设定时，再加上margin-left: auto；及margin-right: auto；就没问题了。需要说明的是如果想⽤这个⽅法使整个页⾯要居中，建议不要套在⼀个div⾥，可以依次拆出多个div，只要在每个拆出的div⾥定义margin-left: auto；及margin-right: auto；就⾏。
1.2 单⾏⽂本垂直居中(使⽤line-height)
⽂字在层中垂直居中使⽤vertical-align属性是做不到的，所以这⾥有个⽐较巧的⽅法就是：设置height的⾼度与line-height的⾼度相同。CSS代码如下：
复制代码代码如下:
[css]
.parentDiv {
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /* ⽔平居中 */
line-height: 100px; /* line-height = height */
}
1.3 ⽂本垂直居中(使⽤vertical-align)
可以使⽤vertical-align实现垂直居中，不过vertical-align仅适⽤于内联元素和table-cell元素，因此之前需要转化。
复制代码代码如下:
[css]
.outerBox{
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /* ⽔平居中 */
display:table-cell; /*转化成table-cell元素*/
vertical-align:middle; /*垂直居中对齐，vertical-align适⽤于内联及table-cell元素*/
}
1.4 图⽚垂直居中(使⽤background-position)
这⾥指的是背景⽅法，在div.parentDiv对象中使⽤background-position属性。CSS代码如下：
复制代码代码如下:
[css]
parentDiv {
background: url(xxx.jpg) #ffffff no-repeat center;
}
注：关键就在于最后的center，这个参数定义图⽚的位置。当然，background-position属性还可以写成“top left"或者"bottom right"等，也可以直接写数值。
2. div居中
⾸先编写⼀个简单的html代码，设置⼀个⽗div类名为parentDiv，再设置⼀个⼦div类名为childDiv。html代码如下：
复制代码代码如下:
实现parentDiv和childDiv⽗⼦div的盒⼦宽⾼背景⾊和边框⼤⼩。CSS代码如下：
复制代码代码如下:
[css]
* {
-webkit-box-sizing: border-box; /*Safari*/
-moz-box-sizing: border-box; /*Firefox*/
box-sizing: border-box;
}
.parentDiv {
width:400px;
height: 100px;
background-color: #00ff00;
margin: 20px;
}
.childDiv {
width: 200px;
height:50px;
background-color: #ff0000;
}
2.1 ⽔平居中(使⽤margin:auto)
当div.childDiv对象拥有固定宽度时，设置⽔平⽅向margin为auto，可以实现⽔平居中。CSS代码如下：
复制代码代码如下:
[css]
/*margin:auto实现⽔平居中，需要居中的div必须拥有固定的宽度*/
parentDiv .childDiv {
margin: 0 auto;
}
2.2 实现⽔平居中(使⽤text-align:center)
如果给⼦盒⼦div.childDiv设置display: inline-block不影响整体布局时，可以将⼦盒⼦转化为inline-block，对⽗盒⼦设置text-
align:center实现居中对齐。CSS代码如下：
复制代码代码如下:
[css]
/*
text-align: center；实现⽔平居中
需要⼦盒⼦设置为display: inline-block;
*/
.parentDiv {
text-align: center;
}
.parentDiv childDiv {
display: inline-block;
}
2.3 table-cell元素居中
将⽗盒⼦设置为table-cell元素，可以使⽤text-align: center；和vertical-align: middle；实现⽔平、垂直居中。⽐较好的解决⽅案是利⽤三层结构模拟⽗⼦结构。html代码如下：
复制代码代码如下:
tableCell
CSS代码如下：
复制代码代码如下:
[css]
/*
table-cell实现居中
将⽗盒⼦设置为table-cell元素，设置
text-align: center; vertical-align: middle;
⼦盒⼦设置为inline-block元素
*/
.tableCell {
display: table;
}
.tableCell .id1 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.
tableCell .childDiv {
display: inline-block;
}
2.4 绝对定位居中(利⽤margin实现偏移)
将parentDiv对象设置为定位元素(利⽤position: relative；属性)，将childDiv对象设置为绝对定位，left和top均为50%，这时⼦盒⼦的左上⾓居中对齐，利⽤margin实现偏移。CSS代码如下：
复制代码代码如下:
[css]
/*绝对定位实现居中*/
.parentDiv {
position: relative;
}
.parentDiv .childDiv {
position: absolute;
left:50%;
top:50%;
margin-left:-100px; /*利⽤margin实现偏移，设置为宽度和⾼度的⼀半的负值*/div border属性
margin-top:-25px;
}
2.5 绝对定位居中(利⽤transform实现偏移)
绝对定位⽅式与2.4类似，只不过利⽤transform中的translate实现偏移。CSS代码如下：
复制代码代码如下:
[css]
/
*绝对定位实现居中,transform偏移*/
.parentDiv {
position: relative;
}
.parentDiv .childDiv {
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%);
}
2.6 绝对定位居中(利⽤margin:auto实现偏移)
同样对⼦盒⼦实现绝对定位，这⾥使⽤top、right、bottom、left均为0，margin为auto实现偏移。CSS代码如下：复制代码代码如下:
[css]
/*绝对定位实现居中,margin:auto实现偏移*/
.parentDiv {
position: relative;
}
.parentDiv .childDiv {
position: absolute;
left:0; /*top、right、bottom、left均为0*/
top:0;
right: 0;
bottom: 0;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。