本文详细介绍了如何使用CSS实现水平居中和垂直居中。针对水平居中，讨论了text-align、display、margin、position和transform属性的应用，并提供了内联元素和块级元素的居中实现方式。对于垂直居中，文章提到了偏移实现和flex弹性布局的方法，包括它们的优缺点和实际代码示例。
CSS实现水平居中与垂直居中
一、水平居中
1. 必备知识
1.1 text-align 属性
text-align 属性指定元素文本的水平对齐方式（作用于子元素和文本）。其常用的值一般有三种：
left左对齐right右对齐center居中对齐
1.2 display 属性
display 属性规定元素应该生成的框的类型（作用与元素自身）。其常用的值一般有四种：
none不会被显示block显示为块级元素inline默认，显示为内联元素inline-block显示为行内块级元素
1.3 margin 属性
margin (外边距)属性定义元素周围的空间（作用于元素自身）。它一共有四个属性值，可以简写。
- 设置一个值：上右下左
- 设置两个值：上下 - 左右
- 设置三个值：上 - 左右 - 下
- 设置四个值：上 - 右 - 下 - 左
1.4 position 属性
position 属性指定一个元素的定位方法的类型（作用于元素自身）。其常用的值一般有四种：
absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。relative生成相对定位的元素，相对于其正常位置进行定位。fixed生成固定定位的元素，相对于浏览器窗口进行定位。sticky粘性定位，该定位基于用户滚动的位置。
1.5 transform 属性
transform 属性应用于元素的2D或3D转换（作用于元素自身）。这个属性允许你将元素旋转，缩放，移动，倾斜等。这个属性比较复杂，在这里我们用到的主要是移动。
2. 实现方式
既然是要实现水平居中，那么父元素必然是一个块级元素，此时根据要实现水平居中的子元素的 display 状态可分为两种情况。
2.1 内联元素居中
内联元素的水平居中非常简单，只需要在父元素中设置 text-align: center 即可。
2.2 块级元素居中
2.2.1 margin: 0 auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
#parent {
width: 400px;
height: 400px;
background: rgb(51, 236, 196);
}
#child {
width: 100px;
height: 100px;
margin: 0 auto;
background: coral;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
最低0.47元/天 解锁文章
1140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
