CSS设置水平垂直居中的7种方法

　　CSS中内容居中的方法有很多种，具体取决于您想要居中的内容是什么类型的元素以及是在什么情况下居中。以下是一些常见方法及代码示例：

　　1. 水平居中 - 文本或行内元素

　　使用 text-align 属性

　　.parent {

　　text-align: center; /* 子元素如果是内联或内联块元素，将会水平居中 */

　　}

　　2. 水平居中 - 块级元素

　　使用 margin: 0 auto

　　.child {

　　width: 300px; /* 需要给定一个宽度 */

　　margin: 0 auto; /* 左右外边距自动分配 */

　　}

　　3. 使用 Flexbox

　　.parent {

　　display: flex;

　　justify-content: center; /* 水平居中 */

　　}

　　4. 垂直居中 - 单行文本

　　使用 line-height

　　.parent {

　　height: 100px; /* 给定一个高度 */

　　}

　　​​​​​​​.child {

　　line-height: 100px; /* 与父元素高度相同 */

　　}

　　5. 垂直居中 - 多行文本和块级元素

　　使用 Flexbox

　　.parent {

　　display: flex;

　　flex-direction: column;

　　justify-content: center; /* 垂直居中 */

　　}

　　6. 水平和垂直居中 - Flexbox 或 Grid

　　Flexbox 方式

　　.parent {

　　display: flex;

　　justify-content: center;

　　align-items: center; /* 垂直居中 */

　　}

　　Grid 方式

　　.parent {

　　display: grid;

　　place-items: center; /* 这相当于 align-items: center 和 justify-items: center 的简写 */

　　}

　　7. 使用 position 和 transform

　　当元素尺寸未知时，可以使用此方法。

　　.parent {

　　position: relative;

　　}

　　​​​​​​​.child {

　　position: absolute;

　　top: 50%;

　　left: 50%;

　　transform: translate(-50%, -50%);

　　}

　　这些是CSS中最常用的居中方法，根据实际需求选择合适的策略。

　　以上就是CSS设置水平垂直居中的7种方法的详细内容，更多关于CSS设置水平垂直居中的资料请关注脚本之家其它相关文章！