常见的CSS居中及布局方法

css居中是前端开发中常用方法，掌握各种居中的方法可以提高开发效率，对准确的还原设计页面有很大的帮助。本文章整理了一些在开发中常用的居中技巧。

1.水平居中

---

1.1内联元素水平居中

利用text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素inline, 内联块inline-block, 内联表(inline-table, inline-flex元素水平居中都有效。核心代码：

.parent{
  text-align:center;
}

演示demo-1

1.2块级元素水平居中

通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。核心代码：

.child{
margin:0 auto;
}

演示demo-2

1.3 多块级元素水平居中

1.3.1 利用inline-block

如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。核心代码：

.parent{
    text-align:center;
}
.child-1, .child-2{
    display:inline-block;  
}

演示demo-3

1.3.2 利用display: flex

利用弹性布局flex，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。核心代码：

.parent{
    display: flex;
    justify-content: center;
}

演示demo-4

---

2.垂直居中

2.1单行内联(inline-)元素垂直居中

通过设置内联元素的高度height和行高line-height相等，从而使元素垂直居中核心代码：

.parent{
   height:150px;
   line-height:150px;
}

演示demo-5

2.2 多行元素垂直居中

2.2.1 利用表布局（table）

利用表布局的vertical-align: middle可以实现子元素的垂直居中。核心代码：

.parent{
    display:table
}
.child{
   display: table-cell;
   vertical-align: middle; 
}

演示demo-6

2.2.2 利用flex布局

利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。核心代码：

.parent{
   display:flex;
   flex-direction:column;
   justify-content:center;
}

演示demo-7

2.3 块级元素垂直居中

2.3.1 固定高度的块级元素

如果已知居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。核心代码：

.parent{
    position:relative;
}
.child{
    position:absolute;
    height:60px;
    top:50%;
    margin-top:-30px;
}

演示demo-8

2.3.2 未知高度的块级元素

当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。部分浏览器存在兼容性的问题。
核心代码：

.parent{
   position:relative;
}
.child{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);  
}

演示demo-9

---

3.水平垂直居中

3.1 未知宽高元素水平垂直居中

利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。核心代码：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

演示demo-10

3.2 利用flex布局

利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
核心代码：

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

演示demo-11

---

4.常见布局方法

html文档：

<div class="parent">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

4.1左列定宽，右列自适应

html文档：

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

核心css代码:

.left{float:left;width:100px;}
.right{margin-left:100px;}

显示效果如下图所示：

利用float+margin实现，该种布局左侧一般为导航栏，右侧为内容。

4.2右列定宽，左列自适应

核心css代码：

.parent{background:red;height:100px;margin:0 auto;}
.left{background:green;margin-right:-100px;width:100%;float:left;}
.right{float:right;width:100px;background:blue;}

利用float+margin实现，显示效果如下：

4.3两列定宽，一列自适应

html结构：

<div class="parent">
   <div class="left"></div>
   <div class="middle"></div>
   <div class="right"></div>
</div>

核心css代码：

.left,.center{float:left:width:200px;}
.right{margin-left:400px;}

利用float+margin实现，显示效果如下：

4.4两侧定宽，中栏自适应

核心css代码：

.left{width：100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}

利用float+margin实现，显示效果如下：

4.5一列不定宽，一列自适应

核心css代码：
利用float+overflow实现:

.left{float:left;}
.right{overflow:hidden;}

利用flex实现

.parent{display:flex;}
.right{flex:1;}

显示效果如下：

---

参考资料：利用HTML和CSS实现常见的布局 15种CSS居中的方式