好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中_html/css_WEB-ITnose

flex实现子块的完美居中

方案

父块使用display:flex属性,子块margin自适应即可实现

代码

index.html

         块状元素垂直居中(已知高度)     *{margin: 0;padding: 0;} .parent{ display: flex; height:500px; background: #03A1FA; } .child{ width: 100px; height: 100px; margin: auto; background: #BB3713; } /* 这个依赖于设置“margin”值为“auto”值,自动获取伸缩容器中剩余的空间。所以设置垂直方向margin值为“auto”,可以使伸缩项目在伸缩容器的两上轴方向都完全集中。 */          

ff

查看更多关于网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中_html/css_WEB-ITnose的详细内容...

  阅读:33次