简介
在本实验中,我们将学习如何使用 display: table
将子元素在其父元素内居中。通过使用此技术,我们可以轻松实现垂直和水平居中,而无需借助复杂的定位或 JavaScript。在为网站和应用程序设计响应式布局时,这是一项很有用的技能。
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"])
css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"])
css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"])
css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"])
css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"])
css/BasicConceptsGroup -.-> css/selectors("`Selectors`")
css/BasicStylingGroup -.-> css/colors("`Colors`")
css/BasicStylingGroup -.-> css/text_styling("`Text Styling`")
css/CoreLayoutGroup -.-> css/borders("`Borders`")
css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`")
css/CoreLayoutGroup -.-> css/display_property("`Display Property`")
css/IntermediateStylingGroup -.-> css/lists_and_tables("`Lists and Tables`")
css/CSSPreprocessorsGroup -.-> css/nesting("`Nesting`")
subgraph Lab Skills
css/selectors -.-> lab-35191{{"`使用表格显示实现元素居中`"}}
css/colors -.-> lab-35191{{"`使用表格显示实现元素居中`"}}
css/text_styling -.-> lab-35191{{"`使用表格显示实现元素居中`"}}
css/borders -.-> lab-35191{{"`使用表格显示实现元素居中`"}}
css/width_and_height -.-> lab-35191{{"`使用表格显示实现元素居中`"}}
css/display_property -.-> lab-35191{{"`使用表格显示实现元素居中`"}}
css/lists_and_tables -.-> lab-35191{{"`使用表格显示实现元素居中`"}}
css/nesting -.-> lab-35191{{"`使用表格显示实现元素居中`"}}
end