水平居中
2019-02-14 本文已影响0人
子却
行内元素
文字等行内元素直接利用text-align：center即可，图片则需要先包裹在一个块级元素中，随后对块级元素添加text-align：center才可。因为text-align是作用在块级元素中的行内元素上的。
块级元素
确定宽度的块级元素
通过给确定宽度的块级元素设置margin-right: auto和margin-left: auto;来实现其水平居中
不确定宽度的块级元素
方法一：
将需要水平居中的块级元素包裹在<table>标签中的<td>中并设置为行内元素，通过给<table>设置margin-right: auto和margin-left: auto;来实现水平居中。缺点是代码过于冗长。
<body>
<style>
div{display: inline;}
table{
margin-right: auto;
margin-left: auto;
}
</style>
<table>
<tr>
<td>
<div class="div2">2222222</div>
</td>
</tr>
</table>
</body>
不确定宽度.png
方法二：
将不确定宽度的块级元素设为行内元素，并包裹在一个块级元素中，对该块级元素设置text-align: center;即可。
缺点是无法为不确定宽度的块级元素设置宽高。
<body>
<style>
.div2{display: inline;}
.div1{
text-align: center;
}
</style>
<div class="div1">
<div class="div2">33333333</div>
</div>
</body>
方法二.png
方法三：
通过给父元素设置float: left；position: relative；left: 50%;，子元素设置position: relative；left: -50%;来实现水平居中。
缺点是元素脱离文档流。
<body>
<style>
.div1{
background-color:peru;
float: left;
position: relative;
left: 50%;
}
.div2{
position: relative;
left: -50%;
background-color: aquamarine;
}
</style>
<div class="div1">
<div class="div2">33333333</div>
</div>
</body>
方法三.png
