简介
在本实验中,我们将学习如何使用CSS变换在父元素中垂直和水平居中子元素。我们将通过使用相对定位和绝对定位,以及 transform
属性及其 translate
函数来实现这一点。本实验将为你提供一种在网页上定位内容的实用技术。
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/DynamicStylingGroup(["`Dynamic Styling`"])
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/positioning("`Positioning`")
css/DynamicStylingGroup -.-> css/transformations("`Transformations`")
subgraph Lab Skills
css/selectors -.-> lab-35250{{"`垂直和水平居中元素`"}}
css/colors -.-> lab-35250{{"`垂直和水平居中元素`"}}
css/text_styling -.-> lab-35250{{"`垂直和水平居中元素`"}}
css/borders -.-> lab-35250{{"`垂直和水平居中元素`"}}
css/width_and_height -.-> lab-35250{{"`垂直和水平居中元素`"}}
css/positioning -.-> lab-35250{{"`垂直和水平居中元素`"}}
css/transformations -.-> lab-35250{{"`垂直和水平居中元素`"}}
end