一、文本居中
利用下面的html代码演示文本居中,也可以到这里在线研究。
- <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居中对齐,点这里
在线研究代码。
- <div class="outerBox">
- <div class="innerBox"></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实现水平居中
- <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>
- /*
- 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>
- /*
- 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>
- /*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{
- 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;
- }
- <div class="outerBox calc">
- <div class="innerBox">calc</div>
- </div>
- /*绝对定位,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);
- }
完工!希望对您有所帮助,欢迎拍砖。