文字
text-align属性功效于指定元素内的所有文字。例如以下代码令<p>元素中的所有文字居中对齐。
p {
text-align: center;
}
inline-block元素
平常的inline-block对象是<img>, <span>。inline-block元素在默认设置中和inline元素同样，是能够在一行中连续摆列的。令inline-block元素居中的第1步是将其转化为block元素，即保准一行仅有这一个元素。 运用display属性将inline-block转化为block。img {
display: block;
}
2. 接下来的过程和block元素同样。
block元素
平常的block对象是<p>, <div>, <section>。
办法1：将margin属性设为auto
下面两种写法的效果是同样的。写法1是一次性把margin的四个方向都设置了。倘若用写法2的话，能够把margin-top和margin-bottom设成其他数值。
div {
/* 写法1 */
margin: auto;
/* 写法2 */
margin-right: auto;
margin-left: auto;
}
margin: auto 只能实现水平居中，不可垂直居中。由于margin-top和margin-bottom的属性为auto时，实质上便是顶端对齐。
办法2：用百分数暗示width, margin
一个元素的范围由margin, border, padding, content（中心内容）构成。方便起见，把border和padding都设为0，而后只必须调节content的width和margin就能够实现水平居中了。
水平居中原则：margin的百分数 x 2 + width的百分数 = 100%
水平居中示例代码效果#parent {
/* 黑色区域 */
width: 100px;
height: 100px;
bac公斤round-color: #000;
}
#child {
/* 灰色区域 */
bac公斤round-color: #ddd;
height: 100px;
width: 20%;
margin-left: 40%;
margin-right: 40%;
}
然则，倘若想用类似的垂直居中原则（margin的百分数 x 2 + height的百分数 = 100%）的话，效果就不对了。div#child的高度、上下边距虽然都是咱们想要的数值，然则div#child的上边距超出了div#parent的范围。div#child仍然保持和div#parent的顶端对齐。因此，用百分数暗示width, margin的办法只适用于水平居中。
垂直居中示例代码效果
| 
发表于 2024-6-30 09:51:36
