黑马程序员技术交流社区

标题: 居中问题 [打印本页]

---

作者: 王子怡    时间: 2019-3-19 13:37
标题: 居中问题
对于块状元素，水平居中可以直接写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.....

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2