CSS中实现居中的方式
一、水平居中
1.用 text-align + inline-block 水平居中
1.1 实现方法
-
html代码
<body> <div class="wrap"> <div class="text">我是元素1</div> </div> </body> -
css代码
<style>
.wrap{
height: 200px;
text-align: center;
border: 1px solid red;
}
.wrap .text{
height: 100px;
width: 300px;
display: inline-block;
border: 1px solid blue;
}
</style>
-
效果
text-align居中效果图
1.2 步骤
（1）先观察父级元素下的子元素是否为行内元素，或具有行内元素的特征，如果是块级元素的话，用display:inline-block;将块级元素转换成行块元素
（2）在父级中写入text-align:center;设置水平居中
1.3 注意
- text-align能对文本以及行内元素进行水平居中，块级元素不行
- 如果要对块级元素进行居中的话，需要将块级元素用display:inline-block;设置成行块元素后才能居中
- text-align使用的元素下面的所有具有行内元素的特点的元素都能起到作用，是具有继承性的，如上图代码中，蓝色div中有span标签，那么span标签也会居中与蓝色div中
2.用定位（postion） + 变形（transform）水平居中
2.1 实现方法
-
css代码
<style> .wrap{ height: 200px; border: 1px solid red; position: relative; } .wrap .text{ height: 100px; width: 300px; border: 1px solid blue; position: absolute; left: 50%; transform: translateX(-50%); } </style> -
效果图
postion定位居中效果图
2.2 实现步骤
（1）父元素开启定位（relative，absolute,fixed都可以），并将子元素设置绝对定位absolute
（2）设置子元素对于父元素向左移动50%（left:50%;），此时并不是居中状态，而是子元素的左边框位于50%的中线
（3）设置子元素的变形，与自身现在的状态向左移动自身的50%，也就是在X轴上向负方向移动50%（transform: translateX(-50%);）,此时实现居中
2.3 注意
- 父级元素是否脱离文档流，不影响子元素水平居中效果，但是transform是css3属性，存在浏览器兼容问题
- postion定位居中方式，只对父级下面的子元素起作用，对子元素下面的后代元素不起作用
3.用 margin: 0 auto + display: block 水平居中
3.1 实现方法
-
html代码
<div class="wrap"> <span class="text">我是元素1</span> </div> -
css代码
<style> .wrap{ height: 200px; border: 1px solid red; } .wrap .text{ height: 100px; width: 300px; display: block; border: 1px solid blue; margin: 0 auto; } </style>
3.2 实现步骤
（1）先观察父级元素下的子元素是否为块级元素，若不是，则先用display: block;设置为块级元素
（2）再对子元素块级元素设置宽高
（3）在子元素里面写入margin: 0 auto;实现水平居中
3.3 注意
- 父级下面的子元素只能是块级元素，不能是行块元素和行内元素（不能具有行内元素特征）
- 子元素必须设置宽度，因为子元素块级元素默认与父级的宽度一致
- 这个方法只需要对子元素进行设置就可以实现水平居中，margin设置auto表示浏览器会自动分配，实现来外边距等分效果
- 当同级元素设置了margin: 0 auto;以后，同级元素之间不能进行设置margin-top、margin-bottom等操作
- margin: 0 auto;居中的所有操作都在子元素里面进行操作
4.flex弹性盒子布局水平居中
4.1 实现方法
-
html 代码
<style> .wrap { height: 200px; border: 1px solid red; display: flex; justify-content: center; } .wrap .text { border: 1px solid blue; } </style> -
效果图
flex布局居中效果图
4.2 实现步骤
（1）设置容器为flex布局
（2）用justify-content: center;属性设置项目主轴方向（此时主轴方向为水平方向）居中
4.3 注意
- 不论子元素是块元素还是行内元素，flex都能实现居中
- flex布局实现水平居中的所有操作都在容器（父元素）里面进行操作
二、垂直居中
1. 固定高度（height） = 行高（line-height）
1.1 实现方法
-
css代码
<style> .wrap{ height:300px; line-height: 300px; } .wrap .text { border: 1px solid blue; } </style> -
效果图
line-height垂直居中效果图
1.2 实现步骤
（1）设置父级元素的高度height
（2）设置父级元素的行高line-height
1.3 注意
- 次方法只针对父级元素下面只有一个块级子元素的时候，或者是一行行内元素的时候（此时行内元素不能进行换行操作）
2. 用定位（postion） + 变形（transform）垂直居中
2.1 实现方法
-
css代码
<style> .wrap { height: 600px; width: 300px; border: 1px solid red; position: relative; } .wrap .text { width: 300px; height: 100px; border: 1px solid blue; position: absolute; top: 50%; transform: translateY(-50%); } </style> -
效果图
postion垂直居中效果图
2.2 实现步骤
（1）父元素开启定位（relative，absolute,fixed都可以），并将子元素设置绝对定位absolute
（2）设置子元素对于父元素向下移动50%（top:50%;），此时并不是居中状态，而是子元素的上边框位于50%的中线
（3）设置子元素的变形，与自身现在的状态向左移动自身的50%，也就是在Y轴上向负方向移动50%（transform: translateY(-50%);）,此时实现居中
3.display: table-cell + vertical-align 垂直居中
3.1 代码
-
css代码
<style> .wrap { height: 600px; width: 300px; border: 1px solid red; display: table-cell; vertical-align: middle; } .wrap .text { width: 300px; height: 100px; border: 1px solid blue; } </style> -
效果图
vertical-align垂直居中效果图
3.2 实现步骤
（1）将父级元素设置成display: table-cell;
（2）写入vertical-align:middle;实现居中
3.3 注意
- vertical-align属性具有继承性，导致父元素内文本也是垂直居中显示的
4. flex弹性盒子布局垂直居中
4.1 实现方法
-
css代码
<style> .wrap { height: 600px; width: 300px; border: 1px solid red; display: flex; flex-direction: column; justify-content: center; } .wrap .text { width: 300px; height: 100px; border: 1px solid blue; } </style> -
效果图
flex垂直居中效果图
4.2 实现步骤
（1）设置容器为flex布局
（2）将容器的排序方式设置为列方向排序（flex-direction: column;）
（3）用justify-content: center;属性设置项目主轴方向（此时主轴方向为垂直方向）居中
