A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

王子怡

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

© 王子怡 初级黑马   /  2019-3-19 13:37  /  649 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

对于块状元素,水平居中可以直接写margin 0 auto;中间的0可以改变其他数值,可以调整块状元素处于竖直方向的什么位置。
对于内联元素,水平居中可以写text-align:center(这里记得,要让一个内联元素居中,一定要在他的父元素里写text-align:center)
很多时候可以把一个元素设置成display:inline-block,此时再用text-align:center会很方便居中;
水平居中:
1.行内元素设置text-align:center
2.块级元素设置固定宽度,margin-left和margin-right设置为auto
3.元素十二指固定宽度,margin-left:设为元素宽度的一半,并设置position:absolute;left:50%
4.固定宽高,父元素{display:flex-direction:column;}子元素{align-self:center;}
垂直居中:
1.display:inline-block; text-align:center; vertical-align:middle;
2.元素设置固定高度,margin-top:设为元素高度的一半,并设置position:absolute;top:50%;
3.....

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马