前言： 在前端开发过程中，居中方法基础又实用，然而很多时候还是常给我们带来许多困扰，所谓磨刀不误砍柴工，掌握好这些方法，灵活运用，对今后的开发效率，会有很大的提升
常用案例
html代码
<div class="content">
<div class="box">Center me, please!</div>
</div>
css代码
* { margin: 0px; padding: 0px; }
.content {
width:200px;
height:200px;
display: table-cell;
vertical-align: middle;
background-color: #FBBB40;
}
.box {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: #61524F;
}
水平居中
1. text-align: center
.content {
text-align: center;
}
.box {
display: inline-block;
}
理解： text-align属性指定子元素对齐方式，设置center指定居中显示，设置子元素display: inline-block是为了让子元素以块级元素呈现。这里不加该属性，文字同样能居中显示
2. margin: 0 auto;
.box {
margin: 0 auto;
}
理解： auto 的意思就是自动对齐，设置margin的左右自动对齐来实现左右自动对齐的效果。这种方式能解决子元素或内容元素的宽度大小不知道的情况下居中显示的效果。另外，如果子元素大小知道的情况下，也可以设置margin-left为具体值来居中。
3. position: absolute
.contetn {
position: relative;
}
.box {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
理解： 这种方式同方法2一样都是设置在子元素上的，因此不影响其他兄弟元素，设置子元素相对父元素为绝对布局方式，距离左边距50%，同时，相对自身的宽度在 X 方向上向左偏移自身宽度的50%，以达到 水平居中效果。
4. table-cell
.content {
display: table-cell;
}
.box {
margin: 0 auto;
}
理解： 设置父元素为table-cell , 让元素以表格单元格的形式呈现，使元素类似于<td>标签。这种方式值得大家尝试使用。
5. flex
.content {
display: flex;
justify-content: center;
}
理解： 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。设置justify-content: center意为中部对齐。flex-start为左边对齐，flex-end右边对齐，还有space-between和space-around意为均匀的占满一行，前者两边没有空格，后者有。
2009年，
W3C提出了一种新的方案----Flex 布局，Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
垂直居中
1. height = line-height
.box {
height: 100px;
line-height: 100px;
}
理解： line-height意为行高，并且行中的元素会自动上下居中，利用此特性，将line-height设置为与height等高，实现元素垂直居中的效果。
2. position: absolute
.content {
position:relative;
}
.box {
position: absolute;
top: 50%;
transfromY:(-50%);
}
理解： 实现方法与水平居中类似，position: absolute相对于 position: relative 的父元素进行绝对定位，距离顶部的距离为50%，同时，又向上便宜自身高度的50%，实现垂直居中的效果。
3. display: table-cell
.content {
ddispaly: table-cell;
vertical-align: middle;
}
理解： display: table-cell与margin配合能实现水平居中，和vertical-align配合能实现垂直居中，就是这么酷，哈哈，学到了吗。
值得注意的是，table-cell不能与float属性共用，当我们必须要用到float时怎么办呢？看下面这种办法
4. flex
.content {
display: flex;
flex-direction: column;
justify-content: center;
}
理解： 相比于水平居中，其实就是多个了flex-direction属性，该属性的意思就是 布局方向，这里设置为column意为列向布局，也就是上下布局，再设置justify-content:center中部对齐，自然就实现了垂直方向的居中。
5. padding
css代码
.content{
margin:0 auto;
width:200px;
height:200px;
background-color: #808e4c;
}
.box{
width: 100px;
height: 100px;
padding: 50px;
background-color: #9c504b;
background-clip:content-box; /* 背景内容裁剪到内容框 */
}
实现效果
理解： 设置父元素宽高200px，子元素宽高100px，再增加padding为剩余部分的一般，实现居中效果。
垂直水平都居中
1. table-cell
..content{
display: table-cell;
vertical-align: middle;
}
.box{
margin: 0 auto;
}
2. position
.content {
position: relative;
}
.box {
postion: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3. flex
.content {
display: flex;
justify-content: center;
align-items: center;
}
引伸： flex布局其他属性
~ 属性
flex-direction默认值为row, 意为水平方向布局，也有row-reverse, 意为水平方向布局且从右往左排版。另外两个对应的值就是column和column-reverse
~ 属性flex-wrap: nowrap(默认) | wrap | wrap-reverse意为 "不换行" | "换行" | "换行且从下往上排版"
~ 属性align-items: fiex-start | flex-end | center | baseline | strench对齐方式如下
网友评论