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
- 开启 Flex 布局 ，父元素通过 justify-content 属性实现居中
- 开启 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实现居中布局：
-
父元素开启 Grid 布局 display: grid;
方法一 ： justify-items: center;
方法二 ： justify-content: center;
-
父元素开启 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;
}
扫一扫
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
