1.元素的水平居中
<1>行内元素水平居中
利用text-align:center可以实现块级元素内部的行内元素的水平居中，此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效，如果内部是块级元素没有设置宽度，宽度会占满父级元素，内容也会居中。如果设置宽度内容会在子元素的宽度范围内居中，如果希望子元素相对父级内容居中，可以将子元素设置为行内块元素。
<style>
.parent{
text-align: center;
background: red;
}
.child{
width: 400px;
height: 100px;
display: inline-block;
background: pink;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
<2>块级元素的水平居中
（1）table+margin
<style>
.parent{
background: red;
}
.child{
width: 400px;
height: 100px;
background: pink;
/* 设置为table类似于block,不设置宽度宽度是内容,可定义设置宽度*/
display: table;
margin: 0 auto;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
(2)设置margin-left和margin-right为auto
<style>
.parent{
background: red;
}
.child{
width: 400px;
height: 100px;
background: pink;
margin: 0 auto;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中&
最低0.47元/天 解锁文章
947
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
