div元素右对齐_CSS中居中对齐元素的⽅法
⽂字
text-align属性作⽤于指定元素内的所有⽂字。例如以下代码令<p>元素中的所有⽂字居中对齐。
p {
text-align: center;
}
inline-block元素
常见的inline-block对象是<img>, <span>。inline-block元素在默认设置中和inline元素⼀样，是可以在⼀⾏中连续排列的。令inline-block 元素居中的第⼀步是将其转化为block元素，即保证⼀⾏只有这⼀个元素。
1. 使⽤display属性将inline-block转化为block。
css设置文字垂直居中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时，实际上就是顶端对齐。margin: auto 只能实现⽔平居中，不能垂直居中。
⽅法2：⽤百分数表⽰width, margin
⼀个元素的范围由margin, border, padding, content（中⼼内容）组成。⽅便起见，把border和padding都设为0，然后只需要调整content的width和margin就可以实现⽔平居中了。
⽔平居中原则：margin的百分数 x 2 + width的百分数 = 100%
⽔平居中⽰例代码效果
#parent {
/* ⿊⾊区域 */
width: 100px;
height: 100px;
background-color: #000;
}
#child {
/* 灰⾊区域 */
background-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的⽅法只适⽤于⽔平居中。
垂直居中⽰例代码效果
实际的#child元素的margin范围（橘⾊区域）
/* 这是⼀段实现不了垂直居中的css */
#parent {
/* ⿊⾊区域 */
width: 100px;
height: 100px;
background-color: #000;
}
#child {
/* 灰⾊区域 */
background-color: #ddd;
width: 100px;
height: 20%;
margin-top: 40%;
margin-bottom: 40%;
}
⽅法3：使⽤flexbox特性
flexbox⽔平、垂直居中都没问题，步骤如下：
flexbox⽔平、垂直居中都没问题
1. 设置⼀个容器作为 flexbox
2. 在容器中指定内含元素⽔平居中，使⽤ justify-content: center
3. 在容器中指定内含元素垂直居中，使⽤ align-items: center
flexbox: ⽔平+垂直居中
#container {
/* ⿊⾊区域 */
background-color: #000;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
#item {
/* 灰⾊区域 */
background-color: #ddd;
width: 40px;
height: 20px;
}
如果要让多个元素（#sub-item1, #sub-item2, #sub-item3, ...）在保持原有布局的同时在容器内居中，
那么就需要⽤⼀个<div>把多个元素包裹起来，使他们成为⼀个整体（即⼀个#item）。然后在容器内把这个整体居中。
<div id="container">
<div id="item">
<div id="sub-item1"></div>
<div id="sub-item2"></div>
<div id="sub-item3"></div>
</div>
</div>
如果不把多个元素包裹进⼀个div#item，则flexbox会把这些元素都按照指定的⽅向（沿⾏/沿列）堆叠，破坏这些元素之间的布局关系。⽅法4：使⽤css的2D变换---translate()
这也是⼀个⽔平、垂直居中都没⽑病的⽅法。
想象元素的左上⾓有个坐标轴，x轴正⽅向为右，y轴的正⽅向为下。translate(deltaX, deltaY)的两个参数分别是元素相对于起始位置沿x 轴、y轴正⽅向的位移。
若要使元素垂直居中，则令 deltaY = (container的⾼度 - item的⾼度) / 2
同理，若要⽔平居中，则令 deltaX = (container的宽度 - item的宽度) / 2
垂直居中⽰例代码效果
#container {
/* ⿊⾊区域 */
background-color: #000;
width: 100px;
height: 100px;
}
#item {
/* 灰⾊区域 */
background-color: #ddd;
width: 100px;
height: 20px;
-
ms-transform: translate(0, 40px); /* IE 9 */
-webkit-transform: translate(0, 40px); /* Safari */    transform: translate(0, 40px);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。