站长资源
全栈工程师站点

利用css的display:table属性实现元素动态居中

display:table的相关属性:

  • table:指定对象作为块元素级的表格。类同于html标签<table>(CSS2)
  • inline-table:指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)
  • table-caption:指定对象作为表格标题。类同于html标签<caption>(CSS2)
  • table-cell:指定对象作为表格单元格。类同于html标签<td>(CSS2)
  • table-row:指定对象作为表格行。类同于html标签<tr>(CSS2)
  • table-row-group:指定对象作为表格行组。类同于html标签<tbody>(CSS2)
  • table-column:指定对象作为表格列。类同于html标签<col>(CSS2)
  • table-column-group:指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)
  • table-header-group:指定对象作为表格标题组。类同于html标签<thead>(CSS2)
  • table-footer-group:指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)

动态垂直居中对齐

移步:https://codepen.io/Moreduo/pen/aLrrRG/

动态水平居中对齐

移步:https://codepen.io/Moreduo/pen/Yrbovy/

响应式布局

移步:https://codepen.io/Moreduo/pen/mBYZvO/

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 利用css的display:table属性实现元素动态居中

评论 1

评论前必须登录!

 

  1. #-9

    不止一次的来,不止一次的去,来来去去,这就是这个博客的魅力!

    套图网1年前 (2017-10-24)