html让⽂字向下居中,css如何让字上下居中？
css可以使⽤align-items属性让⽂字上下居中，将⽂字所在容器定义为flex容器，然后设置align-items:center；样式即可让⽂字上下居中。
css设置⽂字上下居中：
#main {
width: 220px;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
#main div {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
}
上下居中⽂字
注意:
注意: Internet Explorer 10 及更早版本浏览器不⽀持 align-items 属性。
注意: Safari 7.0 及更新版本通过 -webkit-align-items 属性⽀持该属性。
注意:
效果如下：
align-items 属性定义flex⼦项在flex容器的当前⾏的侧轴(纵轴)⽅向上的对齐⽅式。
提⽰：使⽤每个弹性对象元素的 align-self 属性可重写 align-items 属性。
属性值为center：
css设置文字垂直居中
元素位于容器的中⼼。
弹性盒⼦元素在该⾏的侧轴(纵轴)上居中放置。(如果该⾏的尺⼨⼩于弹性盒⼦元素的尺⼨，则会向两个⽅向溢出相同的长度)。

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