CSS各种居中方法

1. 水平居中

1.1 行内元素:

1
text-align: center;

1.2 块级元素:

1
margin: 0 auto;

这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响,否则一切都是无用功。

1.3 多于一个块级元素:

  1. 子元素设置为inline-block类型,同时父元素设置属性 text-align: center;

代码:

1
2
3
4
5
6
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;

  1. 使用flex box
    1
    2
    3
    4
    flex-center {
    display: flex;
    justify-content: center;
    }

2.垂直居中

2.1 行内元素

单行行内元素

  1. 可以设置padding-top,padding-bottom

  2. 如果无法使用padding属性,则将height和line-height设为相等也可以垂直居中。

关于line-height和height可参考css行高line-height的一些深入理解

多行行内元素

  1. 可以将元素转为table样式,再设置vertical-align:middle;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .center-table {
    display: table;
    height: 250px;
    background: white;
    width: 240px;
    margin: 20px;
    }
    .center-table p {
    display: table-cell;
    margin: 0;
    background: black;
    color: white;
    padding: 20px;
    border: 10px solid white;
    vertical-align: middle;
    }
  2. 使用flex布局

    1
    2
    3
    4
    5
    6
    .flex-center-vertically {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 400px;
    }

这里要注意!!flex布局要求父元素必须显示设置heights

  1. 在容器中放置伪元素

并使用vertical-align使文本垂直对齐该伪元素

1
2
3
4
5
6
7
8
9
10
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}

2.2 块级元素

  1. 已知高度

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .parent {
    position: relative;
    }
    .child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
    }
  2. 元素是未知高度

    1
    2
    3
    4
    5
    6
    7
    8
    .parent {
    position: relative;
    }
    .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    }
  3. 用flex布局

    1
    2
    3
    4
    5
    .parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

3. 垂直和水平居中

3.1 固定大小元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}

首先给父元素写上positon:relative,这么做是为了给子元素打上position:absolute的时候不会被定位到外太空去。接下去,写上子元素的height和width,这个似乎是必须的
,某些浏览器在解析的时候如果没有这2个值的话会出现意想不到的错位。接着就是整个方法的核心,给子元素再打上top:50%;left:50%以及margin-top:一半的height值的的负数;
margin- left:一半的weight值的负数。整理一下之后,可能你会给你的子元素写上这样的css(当然,父元素也要先写上width和height)

3.2 未知大小元素

如果当前元素大小未知,可以使用translate将元素在x和y两个方向反向偏移自身的50%的大小,使其居中显示

1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

3.3 使用flex居中

1
2
3
4
5
.parent {
display: flex;
justify-content: center;
align-items: center;
}

Reference:

Centering in CSS: A Complete Guide 完整讨论了不同情况下的居中方案

Get HTML & CSS Tips In Your Inbox:一个作弊工具生成居中代码

坚持原创技术分享,您的支持将鼓励我继续创作!