CSS那些事儿——居中布局

时间 2019-12-10

标签 css 那些事儿居中布局栏目 CSS 繁體版

原文原文链接

前言

居中布局，是前端页面最多见的一种布局需求。刚开始学习前端时仍是困扰了一段时间，后来看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面将现今本身了解的居中布局方法做个小总结。css

概述

首先来看看居中布局的需求分类：html

水平居中前端
垂直居中浏览器
垂直水平居中ide

分别的，针对不一样的元素类型，行内元素仍是块级元素，咱们能够有不一样的处理方法。这边引用mdn的文档简单说明一下行内元素与块级元素，有助于理解相应的实现原理。布局

行内元素：一个行内元素只占据它对应标签的边框所包含的空间。如a, img, span, button, input, label, select, textarea 等。
块级元素：块级元素占据其父元素（容器）的整个空间. 如div, h1~6, p, form, table, ul, ol 等。性能

固然，对于上述类型的元素，咱们也能够经过设置display: inline-block的方式使其变为行内盒子，使用行内元素的方法进行居中。
下面，针对不一样的布局需求，分别总结一下相应的实现方式。注意，本文所述的行内元素为display属性为inline或inline-block的元素。学习

水平居中

行内元素

在包含的父元素定义text-align属性为center。flex

.parent {
    text-align: center;
}

优势：兼容性好，而且适用于多个inline-block元素在同一行进行居中，不用考虑各个元素的宽度问题。
浏览器兼容性：Allui

块级元素

在当前元素设置margin-left与margin-right属性为auto。通常简写以下：

.child {
    margin: 0 auto;
}

此时的元素天然也是须要设定width属性的，不然做为块级元素，它的宽度就是100%，并不须要进行居中了。
浏览器兼容性：All

垂直居中

行内元素

使用line-height
若是内容是单行的，那么能够在包含的父元素定义相同的height与line-height一致。
```
.parent {
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
}
```
浏览器兼容性：All
使用padding
也可使用padding属性进行居中，但使用状况条件相对有限，受外层包含元素的高度影响。
```
.parent {
    padding-top: 20px;
    padding-bottom: 20px;
}
```
浏览器兼容性：All

利用伪元素
经过伪元素，使用vertical-align属性进行对齐，这个方法比较巧妙，能够用于上述方法不适用的场景。
浏览器兼容性：All
Html:

<div class="container">
    <p>If both of these techniques are out, you could employ the "ghost element" technique, in which a full-height pseudo element is placed inside the container and the text is vertically aligned with that.</p>
</div>

CSS:

.container {
    height: 200px;
    background-color: #aaa;
}
.container::before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
p {
    width: 300px;
    display: inline-block;
    vertical-align: middle;
}

效果：

块级元素

已知元素高度

绝对定位与margin

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 0;
    height: 200px;
    margin-top: -100px;
}

浏览器兼容性：All

绝对定位方法

.parent {
    position: relative;
}
.child {
    position: absolute;
    height: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

此方法须要设定height属性。浏览器兼容性：All。

未知高度
利用transform属性
```
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
```
浏览器兼容性：IE9+
(但愿兼容IE8？能够考虑使用设置元素为inline-block,使用伪元素居中方法。)

垂直水平居中

对于这个问题，能够综合上述一、2点进行实现。

行内元素

使用text-align与line-height属性便可。

块级元素

已知高度与宽度

使用absolute+margin方法。

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
}

绝对定位居中方法:

.parent {
    position: relative;
}
.child {
    position: absolute;
    height: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

未知高度与宽度
使用transform方法：

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

其余居中方法

前三节中的方法是相对来讲使用率较高的方法，而且有较好的兼容性。除此以外，还有一些方法也能够实现居中。

使用float实现水平居中

Html:

<div class="container">
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
    </div>
</div>

CSS:

.container {
    background-color: #aaa;
    width: 600px;
    height: 200px;
    position: relative;
}
.parent {
    display: inline-block;
    position: relative;
    left: 50%;
    float: left;
    clear: left;
}
.child {
    background-color: #6aa;
    width: 100px;
    height: 100px;
    position: relative;
    right: 50%;
    float: left;
}

效果：

使用flex

不考虑兼容性的状况下，flex能够轻松实现水平与垂直居中

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

使用table

使用table也具备良好的兼容性，可是table布局会带来页面重排性能的问题，因此通常都不采用。

.child {
    width: 100px;
    height: 100px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

使用calc计算属性

使用CSS3的calc属性，基于当前的页面的布局计算尺寸。
兼容性：IE9+
Html:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent {
    background-color: #aaa;
    width: 600px;
    min-height: 400px;
    position: relative;
}
.child {
    background-color: #ff2;
    width: 200px;
    height: 200px;
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}

效果：

参考文章

第一篇技术文章，就写到这里啦^_^。