【CSS 布局】水平垂直居中

CSS 布局-水平垂直居中

一、水平居中

创建一个父盒子，和子盒子

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

基本样式如下

.parent {background-color: #fff;
}.child {background-color: #999;width: 100px;height: 100px;
}

1.使用 text-aligin 屬性

若元素为行内块级元素，也就是 display: inline-block 的元素，可以通过为其父元素设置text-align: center 实现水平居中。

<!-- 1. 使用 text-aligin 屬性 ，子元素行内块元素 display:inline-block; -->
<div class="parent text-align-center"><div class="child display-inline-block"></div>
</div>

css样式如下

/* 	 对于子级为 display: inline-block; 可以通过 text-align: center; 实现水平居中*/
.text-align-center {text-align: center;
}.display-inline-block {display: inline-block;
}

2.margin：0 auto;

定宽块级元素水平居中：若元素为定宽的的子级块级元素，设置宽度，最简单的一种方式就是 margin: 0 auto;。

<!-- 2.定宽块级元素水平居中： 设置宽度，设置margin：0 auto; -->
<div class="parent "><div class="child margin-0-auto"></div>
</div>

css样式如下

/* 对于定宽的子元素，直接 margin:0 auto; 即可实现水平居中 */
.margin-0-auto {margin: 0 auto;
}

3.定位 : relative + left:50% + margin-left: 负宽度的一半;

定宽块级元素水平居中：对于开启定位的元素，可以通过 left 属性 和 margin 实现。 子元素开启相对定位 position:relative; 设置left:50%；属性，设置 margin-left: 负宽度的一半;

<!-- 3.定宽块级元素水平居中：开启相对定位 paosition:relative; 设置left:50%属性，设置margin-left: 负宽度的一半; -->
<div class="parent  "><div class="child child-relative"></div>
</div>

css基本样式如下

/* 对于定宽的子元素，开启定位relative , margin-left 为 负的宽度的一半*/
.child-relative {position: relative;left: 50%;margin-left: -50px;
}

4.定位 :父相子绝 + magin:auto

定宽块级元素水平居中：对于开启开启绝对定位或者固定定位的元素， left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。

(1)开启定位 父相子绝;

(2)水平拉满屏幕,子元素设置left:0；right:0;

(3)拉满屏幕之后设置宽度，设置width宽度

(4)最后通过 margin 实现水平居中 :margin: auto;

<!-- 4.定宽块级元素水平居中：开启定位 父相子绝 ，子元素设置left:0；right:0;设置width宽度，margin:auto; -->
<div class="parent h100 parent-relative"><div class="child child-absolute child-left-0-right-0"></div>
</div>

css样式如下

.parent {background-color: #fff;
}.child {background-color: #999;width: 100px;height: 100px;
}/* 子绝父相 */
.parent-relative {position: relative;
}.h100 {height: 100px;
}/* 父相子绝 */
.child-absolute {position: absolute;
}/* 当元素开启绝对定位或者固定定位时，
left 属性和 right 属性一起设置就会拉伸元素的宽度，left: 0;right: 0;
在配合 width 属性与 margin 属性就可以实现水平居中。 */
.child-left-0-right-0 {left: 0;right: 0;margin: auto;
}

5.定位 :父相子绝 + left:50% + transform: translateX(-50%);

定宽块级元素水平居中：对于开启开启绝对定位或者固定定位的元素， left 属性和 transform 属性即可实现水平居中。

（1） 开启定位 父相子绝

（2）子元素设置left:50%属性；

（3）transform: translateX(-50%);

类似于 left 和 -margin 的用法，但是该方法不需要手动计算宽度。

<!-- 5.定宽块级元素水平居中：开启定位 父相子绝 ，子元素设置left:50%属性；transform: translateX(-50%); -->
<div class="parent h100 parent-relative"><div class="child child-absolute child-transform-x"></div>
</div>

基本样式如下

.parent {background-color: #fff;
}.child {background-color: #999;width: 100px;height: 100px;
}/* 子绝父相 */
.parent-relative {position: relative;
}.h100 {height: 100px;
}/* 父相子绝 */
.child-absolute {position: absolute;}/* 该方法类似于 left 于 -margin 的用法，但是该方法不需要手动计算宽度。 */
.child-transform-x {left: 50%;transform: translateX(-50%);
}

6.Flex 布局 + justify-content :center

1. 开启 Flex 布局 ，父元素通过 justify-content 属性实现居中
2. 开启 Flex 布局，子元素设置margin:auto;

<!-- 6.定宽块级元素水平居中：开启 Flex 布局  ，父元素通过 justify-content 属性实现居中；或者 子元素设置margin:auto; -->
<div class="parent parent-flex parent-justify-content-center"><div class="child "></div>
</div><div class="parent parent-flex "><div class="child child-margin-auto"></div>
</div>

基本样式如下

.parent {background-color: #fff;
}.child {background-color: #999;width: 100px;height: 100px;
}/* 开启flex布局 ，设置justify-content：center；居中 */.parent-flex {display: flex;
}.parent-justify-content-center {justify-content: center;}.child-margin-auto {margin: auto;
}

7.Grid 布局 + justify-items / justify-content / margin:auto;

通过Grid实现居中布局：

1. 父元素开启 Grid 布局 display: grid;

   方法一 ： justify-items: center;

   方法二 ： justify-content: center;

2. 父元素开启 Grid 布局 display: grid;子元素设置margin: auto；

<!-- 7.定宽块级元素水平居中：开启 Grid  布局  ，父元素通过 justify-items: center;属性实现居中；或者 父元素通过  justify-content: center;属性实现居中；或者 子元素设置margin:auto; -->
<div class="parent parent-grid parent-justify-content-center"><div class="child "></div>
</div><div class="parent parent-grid parent-justify-items-center"><div class="child "></div>
</div><div class="parent parent-grid "><div class="child child-margin-auto"></div>
</div>

基本样式如下

.parent {background-color: #fff;
}.child {background-color: #999;width: 100px;height: 100px;
}.child-margin-auto {margin: auto;
}/* grid 布局 */
.parent-grid {display: grid;
}.parent-justify-items-center {justify-items: center;
}

二、垂直居中

创建一个父盒子，和子盒子

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

公共的 CSS 代码如下

.parent {height: 50px;width: 50px;margin: 0 auto;background-color: #ccc;
}.child {width: 50px;height: 10px;background-color: aliceblue;
}

1.display: inline-block, vertical-align: middle

设置子元素为行内块级元素, display: inline-block, vertical-align: middle;并让父元素行高等同于高度。

<!-- 1. 行内块元素垂直居中 -->
<div class="parent lh50"><div class="child display-inline-block-middle"></div>
</div>

基本样式如下

/* 为父级容器设置行高 */
.lh50 {line-height: 50px;
}.display-inline-block-middle {/* 将子级元素设置为 inline-block 元素 */display: inline-block;/* 通过 vertical-align: middle; 实现居中 */vertical-align: middle;
}

2.定位: 子绝父相+top:50% ;margin-top:负高度的一半

设置通过定位的方式:为父级容器开启相对定位position: relative;,子元素开启绝对定位position: absolute;通过top: 50%; margin-top: 等于负的高度的一半就可以实现垂直居中。

<!-- 2. 定位方式实现 top:50% ;margin:负高度的一半-->
<div class="parent mt5 parent-position-relative"><div class="child child-position-absolute child-top-50-margin-top"></div>
</div>

css样式如下

/* 为父级容器开启相对定位 */
.parent-position-relative {position: relative;
}.child-position-absolute {position: absolute;
}.child-top-50-margin-top {top: 50%;/* margin-top: 等于负高度的一半 */margin-top: -5px;
}

3.定位: 子绝父相 + top/bottom:0 + margin: auto

设置通过定位的方式:为父级容器开启相对定位position: relative;,子元素开启绝对定位position: absolute; top 和 bottom 将子元素拉伸至100%，设置指定的高度，通过margin:
auto;即可实现垂直居中。

<!-- 3. 定位方式实现 top:0 ;bottom:0; margin:auto;-->
<div class="parent mt5 parent-position-relative"><div class="child child-position-absolute  child-top-0-bottom-0 child-margin-auto"></div>
</div>

css样式如下

/* 为父级容器开启相对定位 */
.parent-position-relative {position: relative;
}.child-position-absolute {position: absolute;
}.child-top-0-bottom-0 {top: 0;bottom: 0;
}.child-margin-auto {margin: auto;
}

4.定位: 子绝父相 + top + transform

设置通过定位的方式:为父级容器开启相对定位position: relative;,子元素开启绝对定位position: absolute; 使用 top 配合 transform 属性：top: 50%; transform:
translateY(-50%);

<!-- 3. 定位方式实现 top:0 ;bottom:0; margin:auto;-->
<div class="parent mt5 parent-position-relative"><div class="child child-position-absolute  child-top-0-bottom-0 child-margin-auto"></div>
</div>

css样式如下

/* 为父级容器开启相对定位 */
.parent-position-relative {position: relative;
}.child-position-absolute {position: absolute;
}.child-top-50 {top: 50%;
}.child-transform-y {transform: translateY(-50%);
}

5.flex布局 + align-items:center

通过 Flex 可以有很多方式实现这个垂直居中布局。 方法一 : flex布局 flex + 父元素 align-items:center; 方法二 : flex布局 flex + 子元素 margin:auto;

<!-- 方法一 : flex布局 flex ，父元素 align-items:center;-->
<div class="parent mt5 parent-flex align-items-center"><div class="child "></div>
</div><!-- 方法二 : flex布局 flex + 子元素 margin:auto-->
<div class="parent mt5 parent-flex "><div class="child child-margin-auto"></div>
</div>

css样式如下

.parent-flex {display: flex;
}.align-items-center {align-items: center;
}.child-margin-auto {margin: auto;
}

6.grid布局 + align-items:center

通过 Grid 可以有很多方式实现这个垂直居中布局。 方法一 : grid布局 grid + 父元素 align-items:center; 方法二 : grid布局 grid + 父元素 align-center:center;
方法三 : grid布局 grid + 子元素 margin:auto; 方法四 : grid布局 grid + 子元素 align-self:center;

<!-- 5. grid布局 grid
父元素 align-items:center;
或父元素 align-center:center;
或 子元素 margin:auto--><!-- 方法一 : grid布局 grid + 父元素 align-items:center;-->
<div class="parent mt5 parent-grid align-items-center"><div class="child "></div></div><!-- 方法二 : grid布局 grid + 父元素 align-center:center;-->
<div class="parent mt5 parent-grid align-content-center"><div class="child "></div>
</div><!-- 方法三 : grid布局 grid + 子元素 margin:auto;-->
<div class="parent mt5 parent-grid "><div class="child child-margin-auto"></div>
</div><!-- 方法四 : grid布局 grid + 子元素 align-self:center;-->
<div class="parent mt5 parent-grid "><div class="child align-self-center"></div>
</div>

css样式如下

.parent-grid {display: grid;
}.align-content-center {align-content: center;
}.child-margin-auto {margin: auto;
}.align-self-center {align-self: center;
}

三、水平垂直居中

创建一个父盒子，和子盒子

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

基本CSS样式如下

body {margin: 0;
}.parent {height: 50px;width: 50px;background-color: bisque;margin: 0 auto;
}.child {width: 20px;height: 20px;background-color: #ccc;
}

1.行内块元素: 行高 + vertical-align: middle + text-align: center

1.实现垂直居中: 子元素设置为行内块元素，父元素设置行高等于容器高度。 => vertical-align:middle;
2.实现水平居中: 子元素设置为行内块元素 => text-align:center;

<!-- 1. 行内块元素
(1)容器元素行高等于容器高度
(2)通过 text-align: center; 实现水平居中
(3)将子级元素设置为水平块级元素
(4)通过 vertical-align: middle; 实现垂直居中
-->
<div class="parent parent-line-height text-align-center"><div class="child child-display-inline-block vertical-align-middle"></div>
</div>

基本CSS样式如下

.child-display-inline-block {display: inline-block;
}.parent-line-height {line-height: 50px;
}.vertical-align-middle {vertical-align: middle;
}.text-align-center {text-align: center;
}

2.定位: 子绝父相 + 偏移量calc设置

1.设置父元素相对定位 position:relative;，子元素绝对定位 position:absolute;
2.设置偏移量：值为 50%减去宽度/高度的一半 => left：calc(50% - 宽度的一半) ; top:calc(50% - 高度的一半) :

<!-- 2. 定位 子绝父相 + 偏移量 calc 设置
(1)使子元素相对于容器元素定位
(2)子元素开启绝对定位
(3)设置该元素的偏移量，值为50% 减去宽度/高度的一半
-->
<div class="parent parent-position-relative"><div class="child child-position-absolute  child-left-calc-top-calc"></div>
</div>

基本CSS样式如下

.parent-position-relative {position: relative;
}.child-position-absolute {position: absolute;
}.child-left-calc-top-calc {left: calc(50% - 10px);top: calc(50% - 10px);
}

3.定位: 子绝父相 + 偏移量 margin-left margin-top 设置

1.设置父元素相对定位 position:relative; 子元素绝对定位 position:absolute;
2.设置偏移量： left: 50%; top: 50%;
3.外边距-宽度/高度的一半将元素移动: margin-left：- 宽度的一半 ; margin-top: 高度的一半 ;

<!-- 3.定位 子绝父相 + 偏移量 margin-left margin-top 设置
(1)使子元素相对于容器元素定位
(2)子元素开启绝对定位
(3)设置该元素的偏移量，值为50%
(4)通过外边距-值的方式将元素移动回去
-->
<div class="parent parent-position-relative"><div class="child child-position-absolute child-left-50-top-50 child-margin-left-margin-top"></div>
</div>

基本CSS样式如下

.parent-position-relative {position: relative;
}.child-position-absolute {position: absolute;
}.child-left-50-top-50 {left: 50%;top: 50%;
}.child-margin-left-margin-top {margin-left: -10px;margin-top: -10px;
}

4.定位: 子绝父相 + 将子元素拉满整个容器 + 设置margin :auto

1.设置父元素相对定位 position:relative;，子元素绝对定位 position:absolute;
2.将子元素拉满整个容器 => top: 0;left: 0;right: 0;bottom: 0;
3.设置 margin:auto 实现水平垂直居中

<!-- 4. 定位 子绝父相 + 将子元素拉满整个容器 + 设置margin :auto
(1)使子元素相对于容器元素定位
(2)子元素开启绝对定位
(3)将子元素拉满整个容器
(4)通过margin:auto实现水平垂直居中
-->
<div class="parent parent-position-relative"><div class="child child-position-absolute child-top-left-right-bottom-0 child-margin-auto"></div>
</div>

基本CSS样式如下

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

5.定位: 子绝父相 + 偏移量50% + 设置translate 反向偏移

1.设置父元素相对定位 position:relative;，子元素绝对定位 position:absolute;
2.设置该元素的偏移量，值为 50% => top: 50%;left: 50%;
3.通过translate反向偏移的方式，实现居中 => transform: translate(-50%, -50%);

<!-- 5. 定位 子绝父相 + 偏移量50%  + 设置translate 反向偏移
(1)使子元素相对于容器元素定位
(2)子元素开启绝对定位
(3)设置该元素的偏移量，值为50%
(4)通过 translate 反向偏移的方式，实现居中
-->
<div class="parent  parent-position-relative"><div class="child child-position-absolute child-left-50-top-50 transform-50-50"></div>
</div>

基本CSS样式如下

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

6.Flex 布局 + justify-content:center ; align-items:center

(1)将元素设置为 Flex 布局
(2)通过 justify-content: center 以及 align-items: center 实现或者 margin: auto; 实现。

<!-- 6. flex 父元素flex布局，justify-content:center align-items:center-->
<div class="parent parent-display-flex justify-content-center align-items-center"><div class="child"></div>
</div><!-- 6. flex 父元素flex布局，子元素 margin:auto-->
<div class="parent parent-display-flex "><div class="child child-margin-auto"></div>
</div>

基本CSS样式如下

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

7.grid 布局 + items属性 / content属性 /self 属性 /margin:auto

元素设置为Grid 元素 display: grid;
(1) 通过 items 属性实现 : align-items: center;justify-items: center;
items 的缩写 : place-items: center;
(2)通过 content 属性 : align-content: center; justify-content: center;
content 的缩写 : place-content: center;
(3) margin auto 实现 : margin: auto;
(4)通过 self 属性 : align-self: center; justify-self: center;
self 的缩写 : place-self: center;

<!-- 7. grid 父元素items属性-->
<div class="parent parent-display-grid align-items-center justify-items-center"><div class="child"></div>
</div><!-- 7. grid 父元素content属性-->
<div class="parent parent-display-grid align-content-center justify-content-center"><div class="child"></div>
</div><!-- 7. grid  子元素margin auto属性-->
<div class="parent parent-display-grid"><div class="child child-margin-auto"></div>
</div><!-- 7. grid  子元素self 属性-->
<div class="parent parent-display-grid"><div class="child align-self-center justify-self-center"></div>
</div>

基本CSS样式如下

.justify-content-center {justify-content: center;
}.align-items-center {align-items: center;
}.parent-display-grid {display: grid;
}.justify-items-center {justify-items: center;
}.align-content-center {align-content: center;
}.justify-content-center {justify-content: center;
}.align-self-center {align-self: center;
}.justify-self-center {justify-self: center;
}.place-content-center {place-content: center;
}.place-self-center {place-self: center;
}