本文共 3662 字,大约阅读时间需要 12 分钟。
text-align: center
可以实现在块级元素内部的内联元素水平居中。 此方法对内联元素( inline
), 内联块( inline-block
), 内联表( inline-table
), inline-flex
元素水平居中都有效。 42度空间-内联元素水平居中-测试1 简单是稳定的前提。
margin-left
和 margin-right
设成auto,就可以使块级元素水平居中。 42度空间-块级元素水平居中 简单不先于复杂,而是在复杂之后。
inline-block
42度空间-多块级元素水平居中-inline-block 简单不先于复杂而是在复杂之后简单不先于复杂,而是在复杂之后。
display: flex
flex
),实现水平居中,其中 justify-content
用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式,本例中设置子元素水平居中显示。 42度空间-多块级元素水平居中-弹性布局 简单不先于复杂。简单不先于复杂,而是在复杂之后。而是在复杂之后。
inline-
)元素垂直居中height
)和行高( line-height
)相等,从而使元素垂直居中。 42度空间-单行内联元素垂直居中-line-height 软件在能够复用前必须先能用。
table
)vertical-align: middle
可以实现子元素的垂直居中。 42度空间-多行内联元素垂直居中-table The more technology you learn, the more you realize how little you know.
flex
)flex-direction: column
定义主轴方向为纵向。 因为flex布局是CSS3中定义,在较老的浏览器存在兼容性问题。 42度空间-多行内联元素垂直居中-flex Dance like nobody is watching, code like everybody is.
42度空间-多行内联元素垂直居中-伪元素 “你毕业才两年,这三年工作经验是怎么来的?”程序员答:“加班。”
margin-top
向上偏移元素高度的一半,就可以实现垂直居中了。 42度空间-固定高度的块元素垂直居中 控制复杂性是计算机编程的本质。
transform
属性向Y轴反向偏移50%的方法实现垂直居中。 但是部分浏览器存在兼容性的问题。 42度空间-未知高度的块元素垂直居中 世界上有 10 种人,懂二进制的和不懂二进制的。
42度空间-固定宽高元素水平垂直居中 控制复杂性是计算机编程的本质。
42度空间-未知宽高元素水平垂直居中 当你试图解决一个你不理解的问题时,复杂化就产成了。
justify-content
用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式; 而 align-items
属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 42度空间-利用flex布局实现元素水平垂直居中 Facebook wasn't built in a day.
42度空间-利用grid布局实现元素水平垂直居中 好的程序员能写出人能读懂的代码。
42度空间-如何使DIV在屏幕上水平垂直居中显示?兼容性要好 width: 400px; }一个好的程序员应该是那种过单行线都要往两边看的人。
转载地址:http://tbfpi.baihongyu.com/