1.定宽块状元素 水平居中
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
2.不定宽块状元素 水平居中
1.加入到table标签,再设置margin,或如下
.wrap{
background:#ccc;
display:table;
margin:0px auto;
}
<div class="wrap">
设置我所在的div容器水平居中
</div>
2.display:inline+textalign:center;
它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。
3.通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
.wrap{
float:left;
position:relative;
left:50%;
clear:both;
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
<div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>
3.父元素高度确定的单行文本 垂直居中
.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
<div class="wrap">
<h2>Hello World!</h2>
</div>