关键词：
1、水平居中
水平居中可分为行内元素水平居中和块级元素水平居中
1.1 行内元素水平居中
这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。
.center text-align:center; <div class="center">水平居中</div>
1.2 块级元素水平居中
-
定宽块级元素水平居中
只需给需要居中的块级元素加margin:0 auto即可，但这里需要注意的是，这里块状元素的宽度width值一定要有.center text-align:center; <div class="center">水平居中</div>
-
不定宽块级元素水平居中
不定宽，即块级元素宽度不固定
方法1：设置table通过给要居中显示的元素，设置display:table，然后设置margin:0 auto来实现
.center display:table; margin:0 auto; border:1px solid red; <div class="center">水平居中</div>
方法2：设置inline-block（多个块状元素）
子元素设置inline-block，同时父元素设置text-align:center.center text-align:center; .inlineblock-div display:inline-block; <div class="center"> <div class="inlineblock-div">1</div> <div class="inlineblock-div">2</div> </div>
方法3：设置flex布局
只需把要处理的块状元素的父元素设置display:flex,justify-content:center;.center display:flex; justify-content:center; <div class="center"> <div class="flex-div">1</div> <div class="flex-div">2</div> </div>
方法4：position + 负margin；
方法5：position + margin：auto；
方法6：position + transform；注：这里方法4、5、6同下面垂直居中一样的道理，只不过需要把top/bottom改为left/right，在垂直居中部分会详细讲述。
2、垂直居中
2.1 单行文本垂直居中
- 设置paddingtop=paddingbottom；或
- 设置line-height=height；
2.2 多行文本垂直居中
通过设置父元素table，子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部
2.3 块级元素垂直居中
方法1：flex布局
在需要垂直居中的父元素上，设置display:flex和align-items：center
要求：父元素必须显示设置height值
显示效果：
方法2：利用position和top和负margin（需知宽高）
1、设置元素为absolute/relative/fixed
2、margin=负一半
效果如下：
方法3：利用position和top/bottom和margin:auto（注意不是margin:0 auto）
1、position：absolute/relative/fixed
2、top/bottom：0
3、margin：auto
效果如下：
方法4：利用position和top和transform
transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
效果如下：
注：
- 上述的块级垂直居中方法，稍加改动，即可成为块级水平居中方法，如top/bottom换成left/right
- transform方法，可用于未知元素大小的居中
3、水平垂直居中
方法1：绝对定位+margin:auto
div width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto;
方法2：绝对定位+负margin
div width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px;
方法3：绝对定位+transform
div width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */
方法4：flex布局
.box height:600px; display:flex; justify-content:center; //子元素水平居中 align-items:center; //子元素垂直居中 /* aa只要三句话就可以实现不定宽高水平垂直居中。 */ .box>div background: green; width: 200px; height: 200px;
方法5：table-cell实现居中
.box display:table-cell; vertical-align:middle; text-align:center; width:120px; height:120px; background:purple;
前端css实现水平居中垂直居中水平垂直居中木鱼精简(代码片段)
...成长，书写五彩人生。📒技术聊斋（一）水平居中1、text-align:center<divclass="wrappe 查看详情
还不会css水平垂直居中？这里有12种方案(代码片段)
文章目录CSS水平垂直居中水平居中行内元素（text-align）块状元素（margin）多个块状元素水平垂直居中单行文本垂直居中单张图片居中利用表格特性居中基于绝对定位的解决方案方案一方案二方案三方案四基于视口... 查看详情
水平居中+垂直居中(代码片段)
页面结构都是:<divclass="parent"style="background-color:red;width:400px;height:400px;"><divclass="child"style="background-color:blue;width:200px;height:200px;"></div></div>一、水平居中1.设置父 查看详情
css水平和垂直居中(代码片段)
scss垂直和水平居中(代码片段)
json垂直和水平居中(代码片段)
css垂直和水平居中(代码片段)
css水平+垂直居中布局(代码片段)
textflexbox-垂直和水平居中(代码片段)
scsssassmixin用于定位元素绝对中间/居中垂直/居中水平(代码片段)
16种水平居中垂直居中方法(代码片段)
原文链接水平居中1)若是行内元素,给其父元素设置text-align:center,即可实现行内元素水平居中.2)若是块级元素,该元素设置margin:0auto即可.3)若子元素包含float:left属性,为了让子元素水平居中,则可让父元素宽度设置为fit-content,并且配... 查看详情
水平垂直居中(代码片段)
第一种：#containerposition:relative;#centerwidth:100px;height:100px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);这种方法能起到居中效果的原因：（参考：https://segmentfault.com/q/1010000005151903）第一步 查看详情
csscss居中图像（垂直和水平）(代码片段)
css垂直水平居中div(代码片段)
csscss水平和垂直居中元素(代码片段)
div盒子水平垂直居中(代码片段)
一.div文本的水平居中：margin:0auto;垂直居中：line-height:80px;注释：这里line-height的值要和div的高一致。二：div盒子居中给最外面的父元素设置宽高给要水平垂直居中的div加定位 locationwidth:200px;height:200px;background-color:#00FF00;position... 查看详情
元素水平垂直居中(代码片段)
一、脱离文档流元素的居中方法一：margin:auto法<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>垂直居中</title><styletype="text/css">bodybackground:#ccc;#parentbor 查看详情
水平，垂直居中的15种方法(代码片段)
一.水平居中1.文字水平居中<divclass="one"> 测试居中</div><style>.one width:200px; height:100px; border:1pxsolidred; text-align:center;</style>2.盒子居中<divclass="one">是盒子居中</div&g 查看详情