CSS专题一：探索居中
一、前言
CSS的居中方式，有时候很好用，但大多数时候还是令人迷茫的，所以这个专题就专门归纳整理常用的居中方式，这样以后写起来就不用浪费时间去实验。 居中分为水平居中和垂直居中，下面会讲居中方式以及用代码验证的结果。
二、水平居中
1. margin: 0 auto;
测试代码：
<style>
.box1{
width: 100%;
height: 600px;
background-color: red;
}
.box2{
display: inline;//只有block有效
width: 300px; //一定要设定宽高
height: 150px;
background-color: blue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>总结margin：0 auto：
-
首先一定要有宽高
-
只对block有效，就是对于块级元素有效，连行内块级元素都是无效的。
-
position: absoult; 以及float: ; 中是不会生效的
2. text-align:center
这个是最令我疑惑的，起初以为它是对行内，以及行内块有效，结果发现不是这样。 先测试p标签，p标签是块级元素
<div class="box1" style="height: 600px; background-color: red;">
<p style="text-align: center">文字测试</p>
</div>成功居中。 测试img标签，img标签是行内元素
<div class="box1" style="border: 1px solid #000;width:600px;height: 300px; background-color: red;margin: 0 auto;">
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="" style="text-align: center">
<!--<p style="text-align: center">文字测试</p>-->
</div>发现并没有居中，这就奇怪了
<div class="box1" style="border: 1px solid #000;width:600px;height: 300px; background-color: red;margin: 0 auto;text-align: center;">
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="" >
<!--<p style="text-align: center">文字测试</p>-->
</div>把text-align放在父标签中，居然居中了。
网络上找资料，发现text-align:center 是这样定义的：
text-align属性: 是用来设置块级元素里面内容的水平对齐方式也就是说text-align属性只能设置在块级元素上, 用来控制块级元素内部的内容(包括文本图片), 而不能直接在内容上(比如行内元素或者文本)上设置 ，对inline-block也有效，还有就是浮动情况下是不会居中的。
总结text-align：center
-
一定要设置在块级父元素上
-
inline/inline block均有效
-
float/position：absolute；下无法居中
3.display:table
display: table; 设置表格,可以成为行内利用表格居中，而且文本是自适应长度的。 然后设置margin：0 auto；居中
总结
-
设置table之后有宽度可以设置宽度，没有宽度自适应。
-
脱离文档流无效float/position:absoult;
4.脱离文档流设置居中
-
父元素设置position :relative; 子元素设置 position: absolute;然后设置left:-50%; margin-left: 一半宽；
-
设置display：flex ；justify-content：center；来实现居中
总结
- 用display: flex；性价比很高，远比设置position 好
- 会覆盖float/position的效果
- block/inline-block/inline都行三、垂直居中
1. linehight
设置行高=宽高
总结
1. 设置行高居中（只对文字有效)
2. 要设定宽高麻烦，不能使用100%代替2.table-cell
利用表格的方式来垂直居中(文字图片均有效),设置父元素为表格，再设置子元素
.parent{ display: table;}.child{
display: table-cell;
vertical-align: middle;}
总结：
-
图片文字均有效，要设置父元素
3.未知元素的水平垂直居中
利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。核心代码：.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
总结：
-
比设定偏离像素好用
-
水平垂直都可以使用
4. flex布局
利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
核心代码：.parent { display: flex; justify-content: center; align-items: center;}
9128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
