-
水平居中
- 绝对定位+left+margin-left
.first{ position: absolute; left: 50%; margin-left: -50px;//也就是1/2width }☠️必须得知道物体的宽高
2.绝对定位+left+transform
.second{ position: absolute; left:50%; -webkit-transform: translate(-50%); -moz-transform: translate(-50%); -ms-transform: translate(-50%); -o-transform: translate(-50%); transform: translate(-50%); }😍transform的妙用，translate位移是针对自身的，所以可以不知道自身的宽度，是上面的升级版。
3.绝对定位+margin+左右
.third{ margin:auto; position: absolute; left:0; right:0; }😍margin的妙用，如果设置左右为0，那么水平居中，如果设置上下左右都为0，那么就在整个页面居中（也就是水平也居中垂直也居中），换言之，如果值设置上下为0，那么垂直方向居中。
4.flex布局
.box{ display:flex; justify-content:center; }😍很简洁的样子，给父元素设置两行就能做到水平居中了
- 相对定位+margin
.fouth{ position:relative; margin:x auto x;//x代表随意的数值 }😍好简洁
5.text-align
.box{ text-align:center; }😍text-align属性只对行内元素有效，比如图片、文字、span等，当然也能让它对div奏效，把块级元素设为行内元素就行了。这个属性是设置在父盒子上面的。一般用来设置图片和文字居中比较多。
-
垂直居中
1.line-height
.box{ line-height:50px; }😍设置行高，子元素会垂直居中，不论是行内还是块级子元素都有效。
☠️只对单行文字有效。
2.多行文字垂直居中
//第一种 .box{ display:table; height:200px; } .child{ display:table-sell; vertical-aligh:middle; } //第二种 .box{ display:table-sell; height:200px; vertical-align:middle; } .child{ display:inline-block; }👉vertical-align是用来指定
行内元素和表格单元格（table-sell）元素的垂直对齐方式
CSS-居中
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
