前言
总括： CSS居中始终是一个比较敏锐的专题，为了以后研发的方便，楼主觉得确实必须总结一下了，总的来讲，居中问题分为垂直居中和水平居中，实质上水平居中是很简单的，但垂直居中的方式和办法就千奇百怪了。
原文位置：CSS居中小谈
知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书）
博主博客位置：Damonare的个人博客
人生用物，各有天限；夏涝太多，必有秋旱。
正文
内联元素居中方法
水平居中设置：
行内元素 设置 text-align:center；
Flex布局 设置display:flex;justify-content:center;(灵活运用)
垂直居中设置： 父元素高度确定的单行文本（内联元素） 设置 height = line-height；父元素高度确定的多行文本（内联元素） a:插进 table （插进办法和水平居中同样），而后设置 vertical-align:middle； b:先设置 display:table-cell 再设置 vertical-align:middle；
块级元素居中方法
水平居中设置：
定宽块状元素 设置 上下 margin 值为 auto；
不定宽块状元素 a:在元素外加入 table 标签（完整的，包含 table、tbody、tr、td），该元素写在 td 内，而后设置 margin 的值为 auto； b:给该元素设置 display:inine 办法； c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；
垂直居中设置：
1.运用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;
.box{
position:absolute;/*或fixed*/
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
} 2.利用position:fixed（absolute）属性，margin:auto这个必要不要忘记了;.box{
position: absolute;或fixed
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
} 3.利用display:table-cell属性使内容垂直居中,这个办法在多行文字居中的时候用的比较多;HTML代码：
<div class="box">
<span>多行文字，此处居中设置</span>
</div>
CSS代码：
.box{
display:table-cell;
vertical-align:middle;
text-align:center;
width:100px;
height:120px;
bac公斤round:purple;
}
.box span{
display: inline-block;
vertical-align: middle;
} 4.运用css3的新属性transform:translate(x,y)属性;.box{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
} 5.最高挑上的一种，运用before，after伪元素;HTML代码：
<div class=box>
<div
| 
发表于 2024-6-30 05:53:32
