▲ 点击上方蓝字关注我 ▲ 文 / 景朝霞 来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing

▽ 例子里面用到了“周深”演唱会的图片，如侵权，请联系删除~

目录：CSS布局：水平居中、垂直居中、垂直水平居中1 / 水平居中布局(1)水平居中：文本 /行内元素 / 行内块元素(2)块元素水平居中：定宽+margin值(3)table+margin(4)两个块元素水平居中：inline-block+text-algin(5)absolute+margin(6)absolute + transform(7)flex + justify-content(8)小结：水平居中2 / 垂直居中布局(1)table-cell + vertical-align(2)absolute + margin(3)absolute + transform(4)flex + align-items(5)文本 / 行内元素 / 行内块元素(6)图片元素(7)任意个元素：flex，3种3 / 居中布局(1)定位：3种(2)table + margin 水平居中；table-cell + vertical-align 垂直居中(3)flex + justify-content 水平 / align-items 垂直(4)行内元素 / 行内块元素 / 图片

1 / 水平居中布局

水平居中布局：当前元素在父容器中，水平方向展示

HTML

 <div class="parent">    <div class="child">        朝霞的光影笔记    div>div>

△ html结构

‍

(1)水平居中：文本 /行内元素 / 行内块元素

HTML

 <div class="parent">        <span class="child" style="background:gold">这是span标签span>        <div class="child">这是div标签div>div>

△ html结构

CSS

 /* 其他属性自己写 */.parent { text-algin:center; }div { display:inline-block }

△ 样式代码

△ 图3.1.1_水平居中

文本/行内元素/行内块元素，实现水平居中：在父元素设置text-align:center即可

优点：浏览器兼容性好

缺点：text-align属性有继承性，子元素的文本也会居中显示

注意：在行内块元素和行内元素之间有一个间隙，需要设置font-size:0

(2)块元素水平居中：定宽+margin值

.child{width:100px; margin:0 auto;} 其他的样式自己写哈~

注意：如果子元素脱离文档流(float:left/rigth或者position:absolute/fixed),会让margin值失效的

(3)table+margin

.child {display:table; margin:0 auto;}

它可以让行内元素/块元素居中

注意：如果子元素脱离文档流(float:left/rigth或者position:absolute/fixed),会让margin值失效的

(4)两个块元素水平居中：inline-block+text-algin

.parent {text-align:center;}

.child {display:inline-block;}

注意：

① text-align属性有继承性，会让子元素的文本居中对齐

② inline-block行内块元素之间会产生一个间距，是由于在HTML代码里面标签换行导致的，解决：给父元素设置font-size:0去掉间距

△ 图3.1.3_水平居中

(5)absolute+margin

 .parent {position:relative;}.child {    width: 200px;    height: 100px;    position: absolute;    left: 50%;    margin-left: -100px; /* -子元素宽度/2 */}

△ 设置子元素

(6)absolute + transform

 .parent {position:relative;}.child {    width: 200px;    height: 100px;    position: absolute;    left: 50%;    transform:translateX(-50%);}

△ transform是CSS3的属性，浏览器支持性不好

(7)flex + justify-content

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

(8)小结：水平居中

水平居中的方案：

1、文本 / 行内元素 / 行内块元素：在父元素设置属性text-align:center

2、块元素：

1)多个块元素：子元素 => 行内块元素，父元素 => text-aligin:center

2)子元素设置：定宽 + margin:0 auto;

3)子元素设置：display:table; margin:0 auto; ；行内元素也可以实现水平居中

4)父元素：position:relative;，子元素：position:absolute; left:50%; margin-left:子元素宽度/2

5)父元素：position:relative;，子元素：position:absolute; left:50%; transform:translateX(-50%);

6)父元素：diplay:flex; justify-content:center; 子元素是行内元素也可以居中展示

2 / 垂直居中布局

垂直居中布局：子元素在父级元素容器中，是垂直方向居中显示的

 <style>    .parent {        width:400px;        height:200px;        background-color:lightgray;    }    .child {        width: 200px;        height: 100px;        background-color:lightpink;    }style><div class="parent">    <div class="child">VX公号：朝霞的光影笔记div>div>

(1)table-cell + vertical-align

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

浏览器兼容性比较好

注意：vertical-align属性会让父元素的文本也垂直显示

(2)absolute + margin

.parent {position:relative;}

.child {position:absolute; top:50%; margin-top:-子元素高度/2;}

(3)absolute + transform

.parent {position:relative;}

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

父元素不会脱离文档流，实现子元素垂直居中展示，注意：transform是CSS3的属性，浏览器兼容性不好

(4)flex + align-items

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

(5)文本 / 行内元素 / 行内块元素

 <div class="parent">    VX公众号：朝霞的光影笔记 ID：zhaoxiajingjingdiv>

△ 垂直居中布局

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

高度和行高的值设为一样的，文本 / 行内元素 / 行内块元素 内的文字会实现垂直居中布局

如果是多行文本，则需要设置line-height:高度/行数，会使得文本垂直居中展示

(6)图片元素

 <div class="parent">        <img class="child" src="./1.jpg" alt="">div>

△ html代码

 .parent {    width: 600px;    height: 400px;    background-color: lightgray;}.child {    width: 300px;    height: 200px;}

△ css

.parent { height:400px; line-height:400px; font-size:0; }

.child { vertical-align:middle; }

△ 图3.2.5_图片元素垂直居中

(7)任意个元素：flex，3种

方法一：.parent { display:flex; align-items:center; }

方法二：.parent { display:flex; } .child { align-self:center; }

方法三：.parent { display:flex; flex-direction:column; justify-content:center; }

 <head>       <style>        .parent {            width: 600px;            height: 400px;            background-color: lightgray;        }        .child {            width: 300px;            height: 200px;        }        .son {            height: 100px;            background-color: lightpink;        }    style>head><body>    <p>任意个元素垂直居中布局p>    <div class="parent">        朝霞的光影笔记        <img class="child" src="./1.jpg" alt="">        <div class="son">            ID：zhaoxiajingjing        div>    div>body>

△ html代码

△ 效果图

3 / 居中布局

居中布局：垂直水平居中展示

那就把上述的几种综合一下，基本结构如下：

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

△ html

 .parent {    width: 300px;    height: 200px;    background-color: lightgrey;}.child {    width: 100px;    height: 100px;    background-color: lightpink;}

△ css

(1)定位：3种

方案一：需要知道子元素的宽高具体值

.parent { position:relative; }

.child { position:absolute; top:50%; left:50%; margin-top:-高度/2; margin-left:-宽度/2; }

方案二：利用css3的属性transform

.parent { position:relative; }

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

方案三：定位+margin

.parent { position:relative; }

.child { position:absolute; top:0; right:0; bootom:0; left:0; margin:auto; }

(2)table + margin 水平居中；table-cell + vertical-align 垂直居中

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

.child { display:table; margin；0 auto; }

可以让 行内元素/块元素都实现垂直水平居中

(3)flex + justify-content 水平 / align-items 垂直

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

在PC端兼容性不好，多用于移动端

(4)行内元素 / 行内块元素 / 图片

.parent { text-align:center; line-height:高度; font-size:0; }

.child { vertical-align:middle; font-size:设置字体大小; }

注意：行内块元素里面的文字，需要单独处理

- end -

周三，早上

下车后，在等红绿灯时

一阵风，旋转的扫过马路上的落叶

很美

很想与你分享这一刻