水平居中(总结目前已知道的,后续会继续添加)
子元素为:
- 行内元素
- 定宽块状元素
- 不定宽块状元素
*{
margin:0;
padding:0;
list-style:none;
}
#wrap {
text-align:center;
}
<div id="wrap">
<span>水平居中</span>
</div>
2、对于定宽块状元素,设置margin:0 auto;
*{
margin:0;
padding:0;
list-style:none;
}
#wrap {
margin:0 auto;
background-color:#0F0;
width:200px;
}
<div id="wrap">水平居中水平居中水平居中</div>
3、不定宽块状元素:
一、设置子元素为display:inline;在其父元素上设置text-align:center;
*{
margin:0;
padding:0;
list-style:none;
}
#wrap {
text-align:center;
}
p{
display:inline;
}
<div id="wrap">
<p>水平居中水平居中水平居中</p>
</div>
下面补充两种不定宽块状元素水平居中的方法:
二、加入table标签:利用table标签的长度自适应性,即不定义其长度也不默认其父元素body的长度,(table的长度根据其文本的长度决定。)因此可以看做一个定宽块状元素。再利用定宽块状元素的margin方法水平居中。
table{
margin:0 auto;
border:1px solid;
}
<div>
<table>
<tbody>
<tr>
<td>
<ul>
<li>我要居中</li>
<li>我要居中</li>
<li>我要居中</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
三、通过设置浮动和和相对定位来实现,通过给父元素设置float,然后给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%.
.container{
border:1px solid red;
float:left;
position:relative;
left:50%;
}
.container ul{
border:1px solid yellow;
position:relative;
left:-50%;
overflow:hidden;
}
.container ul li{
float:left;
display:inline;
margin-right:8px;
}
<div class="container">
<ul>
<li>我要居中</li>
<li>我要居中</li>
<li>我要居中</li>
</ul>
</div>
4、使用flex,对于上述三种情况均适用
*{
margin:0;
padding:0;
list-style:none;
}
p{
display:flex;
justify-content:center;
}
<div id="wrap">
<p>水平居中水平居中水平居中</p>
</div>