文本/块级居中问题"/>
html5文本/块级居中问题
文本居中
- 单行文本居中一
设置line-height=height，如下代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.wrap{width: 300px;height: 300px;margin: 20px auto;border: 1px solid red;/*让line-height=height即可*/line-height: 300px;text-align: center;}</style></head><body><div class="wrap"><p>ni hao wei duo ke</p></div></body>
</html>
- 单行文本居中二
（同时也适用于多行文本居中）
让父元素有table属性，子元素设置display: table-cell;
vertical-align: middle;缺一不可，如下代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.wrap{/*让父元素有table属性;*/display: table;width: 300px;height: 300px;margin: 20px auto;border: 1px solid red;text-align: center;}p{/*子元素如下，缺一不可*/display: table-cell;vertical-align: middle;}</style></head><body><div class="wrap"><p>ni hao wei duo ke</p><!-- <p>ni hao wei duo ke</p><p>ni hao wei duo ke</p><p>ni hao wei duo ke</p><p>ni hao wei duo ke</p><p>ni hao wei duo ke</p>--></div></body>
</html>
- 多行文本居中
巧用span占位作用，如下代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.wrap{width: 300px;height: 300px;margin: 20px auto;border: 1px solid red;text-align: center;}p{display: inline-block;vertical-align: middle;}/*span占位作用*/span{display: inline-block;height:100%;border: 1px solid #000;vertical-align: middle;}</style></head><body><div class="wrap"><p>ni hao wei duo ke<br/>ni hao wei duo ke<br/>ni hao wei duo ke</p><!-- span不能省略 --><span></span></div></body>
</html>
块级居中
- 子绝父相，加top,left,margin;如下代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.father{/*相对定位*/position: relative;width: 300px;height: 300px;margin: 50px auto;background-color: #000000;}.son{position: absolute; /*绝对定位*/width: 100px;height: 100px;/*top,left设置必不可少*/top: 50%;left: 50%;/*margin的属性设置此时为该块级宽高的负一半，如下*/margin: -50px 0 0 -50px;background-color:red;}</style></head><body><div class="father"><div class="son"></div></div></body>
</html>
- 子绝父相，加top,left,bottom,right为零，还有margin=auto，如下代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.father{/*父，相对定位*/position: relative;width: 300px;height: 300px;margin: 50px auto;background-color: #000000;}.son{/*子，绝对定位*/position: absolute;/*top,left, right,bottom为0px*/top: 0px;left:0px;bottom: 0px;right: 0px;/*margin不可少*/margin: auto;width: 100px;height: 100px;background-color:red;}</style></head><body><div class="father"><div class="son"></div></div></body>
</html>
- 用box-sizing属性加padding，如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.father{width: 300px;height: 300px;
/*padding(父width300-子width100)/2=100px*/padding: 100px;/*设置box-sizing属性*/box-sizing: border-box;margin: 50px auto;background-color: #000000;}.son{width: 100px;height: 100px;background-color:red;}</style></head><body><div class="father"><div class="son"></div></div></body>
</html>
- 用占位盒子设置居中，如下
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.father{/*父，相对定位*/position: relative;width: 300px;height: 300px;margin: 50px auto;background-color: #000000;}.floater{float: left;width: 100%;height: 50%;/*设置为子元素高的负一半*/margin-bottom: -50px;border: 1px solid #FFFFFF;}.son{clear: both;width: 100px;height: 100px;/*此时margin设置水平居中*/margin: 0 auto;background-color:red;}</style></head><body><div class="father"><!--floater盒子占位作用 --><div class="floater"></div><div class="son"></div></div></body>
</html>
- 父元素设置用display,justify-content,align-items来居中
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.father{
/*用display,justify-content,align-items设置居中*/display: flex;justify-content: center;align-items: center;width: 300px;height: 300px;margin: 50px auto;background-color: #000000;}.son{width: 100px;height: 100px;background-color:red;}</style></head><body><div class="father"><div class="son"></div></div></body>
</html>
- （图片在盒子内居中）
设置 line-height，text-align: center, vertical-align: middle， 如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.father{width: 300px;height: 300px;margin: 50px auto;border:1px solid red;/*设置line-height=hight,还有 text-align: center;*/line-height: 300px; text-align: center;}img{width: 100px;height: 100px;vertical-align: middle;}</style></head><body><div class="father"><img src="img/1.png" ></div></body>
</html>
更多推荐
html5文本/块级居中问题
发布评论