CSS 居中布局方案详解：水平、垂直和水平垂直居中

• 日期: 2024-07-13
• 标签: 常规

1. 水平居中布局：

• 'text-align: center;' （适用于父元素为块级元素，子元素为行内元素）
• 'margin: 0 auto;' （适用于父元素为块级元素，子元素为块级元素）

2. 垂直居中布局：

• 'display: table-cell; vertical-align: middle;' （适用于父元素为 'display: table;' 子元素为 'display: table-cell;'）
• 'position: absolute; top: 50%; transform: translateY(-50%);' （适用于父元素为 'position: relative;' 子元素为 'position: absolute;'）

3. 水平垂直居中布局：

• 'display: flex; justify-content: center; align-items: center;' （适用于父元素为块级元素，子元素为块级元素）
• 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);' （适用于父元素为 'position: relative;' 子元素为 'position: absolute;'）

原文地址: https://www.cveoy.top/t/topic/lVH4 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录