1.垂直居中:
设置父元素:
body {
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
子元素即可垂直和水平居中
2.水平居中:
除了上面说的方法,还有text-align: center;
3.右对齐(浮动到最右):
设置父元素:
body {
display: flex;
}
子元素:
div {
margin-left : auto;
}
4.右对齐同理
5.还有一种垂直水平居中的方法就是transform:
css文件:
.word {
position: absolute;
top: 50%;//
left: 50%;
transform: translate(-50%,-50%);//这句话起到关键作用
}
html:
<span class="word" >1月10日</span>
然后这个span就能水平垂直居中