今天小编跟大家讲解下有关css实现文本和div居中对齐详细讲解示例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css实现文本和div居中对齐详细讲解示例 的相关资料，希望小伙伴们看了有所帮助。
1. 文本居中
首先编写一个简单的html代码，设置一个类名为parentDiv的div对象。html代码如下：复制代码代码如下:<div class="parentDiv">这里随意填写~... </div>
.1 实现文字水平居中（使用text-align）
对div.parentDiv设置text-align: center;来实现。CSS代码如下：复制代码代码如下:[css]</p><p>.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]</p><p>.parentDiv {width:200px;height:100px;border: 1px solid #ececec;text-align:center; line-height: 100px; }
1.3 文本垂直居中（使用vertical-align）
可以使用vertical-align实现垂直居中，不过vertical-align仅适用于内联元素和table-cell元素，因此之前需要转化。
复制代码代码如下:[css]</p><p>.outerBox{ width:200px; height:100px; border: 1px solid #ececec; text-align:center; display:table-cell; vertical-align:middle; }
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代码如下：复制代码代码如下:<div class="parentDiv"><div class="childDiv"></div></div>
实现parentDiv和childDiv父子div的盒子宽高背景色和边框大小。CSS代码如下：复制代码代码如下:[css] * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; 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]parentDiv .childDiv {margin: 0 auto;}
2.2 实现水平居中（使用text-align:center）
如果给子盒子div.childDiv设置display: inline-block不影响整体布局时，可以将子盒子转化为inline-block，对父盒子设置text-align:center实现居中对齐。CSS代码如下：复制代码代码如下:[css]</p><p>.parentDiv {text-align: center;}</p><p>.parentDiv childDiv {display: inline-block;}
2.3 table-cell元素居中
将父盒子设置为table-cell元素，可以使用text-align: center;和vertical-align: middle;实现水平、垂直居中。比较好的解决方案是利用三层结构模拟父子结构。html代码如下：复制代码代码如下:<div class="parentDiv tableCell"><div class="id1"><div class="childDiv">tableCell</div></div></div>
CSS代码如下：复制代码代码如下:[css]</p><p>.tableCell {display: table;}</p><p>.tableCell .id1 {display: table-cell;text-align: center;vertical-align: middle;}</p><p>.tableCell .childDiv {display: inline-block;}
2.4 绝对定位居中（利用margin实现偏移）
将parentDiv对象设置为定位元素（利用position: relative;属性），将childDiv对象设置为绝对定位，left和top均为50%，这时子盒子的左上角居中对齐，利用margin实现偏移。CSS代码如下：
复制代码代码如下:[css]</p><p>.parentDiv {position: relative;}</p><p>.parentDiv .childDiv {position: absolute;left:50%;top:50%;margin-left:-100px; margin-top:-25px;}
2.5 绝对定位居中（利用transform实现偏移）
绝对定位方式与2.4类似，只不过利用transform中的translate实现偏移。CSS代码如下：复制代码代码如下:[css]</p><p>.parentDiv {position: relative;}</p><p>.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]</p><p>.parentDiv {position: relative;}</p><p>.parentDiv .childDiv {position: absolute;left:0; top:0;right: 0;bottom: 0;margin: auto;}
2.7 Flexbox居中
使用弹性盒模型(flexbox)实现居中。CSS代码：复制代码代码如下:[css]</p><p>.flexBox {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -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;}
来源：爱蒂网
