CSS垂直居中、水平居中
<h2 style="color: black; text-align: left; margin-bottom: 10px;">CSS垂直居中、水平居中</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">让一个div<span style="color: black;">或</span>一段文字<span style="color: black;">也</span><span style="color: black;">或</span>一张照片居中<span style="color: black;">表示</span>的问题，面试的过程中<span style="color: black;">亦</span>经常被问到。相信<span style="color: black;">大众</span>都<span style="color: black;">平常</span>的布局<span style="color: black;">亦</span>经常会用到，回答出个三两种<span style="color: black;">处理</span><span style="color: black;">方法</span><span style="color: black;">也</span>不是难事。但今天我细究了一下，<span style="color: black;">发掘</span>还有新大陆可寻，特意留此博文总结一下，与君分享！<span style="color: black;">倘若</span>你有新的<span style="color: black;">办法</span>，欢迎<span style="color: black;">弥补</span>！ </p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">咱们</span>先从固定宽高的div<span style="color: black;">起始</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为方便演示，默认宽高各为100px的div</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="wrapper">
<div class="content"></div>
</div></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以下方式<span style="color: black;">所有</span>是水平及垂直居中</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>一：padding填充</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">content</span><span style="color: black;">{</span>
<span style="color: black;">margin</span><span style="color: black;">:</span> <span style="color: black;">0</span> <span style="color: black;">auto</span><span style="color: black;">;</span>
<span style="color: black;">padding</span><span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">red</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">优点：兼容性非常好 </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">缺点：<span style="color: black;">倘若</span>父级的高度受到兄弟节点的影响，<span style="color: black;">这般</span>自己就不居中了</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>二：绝对定位</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">wrapper</span><span style="color: black;">{</span>
<span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">relative</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;">.</span><span style="color: black;">content</span><span style="color: black;">{</span>
<span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">absolute</span><span style="color: black;">;</span>
<span style="color: black;">left</span><span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">%</span><span style="color: black;">;</span>
<span style="color: black;">top</span><span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">%</span><span style="color: black;">;</span>
<span style="color: black;">margin-top</span><span style="color: black;">:</span> <span style="color: black;">-50</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">margin-left</span><span style="color: black;">:</span> <span style="color: black;">-50</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">red</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">优点：兼容性非常好 </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">缺点：<span style="color: black;">必须</span>提前<span style="color: black;">晓得</span>div的宽高，实用性偏弱</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>三：计算属性（calc）</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">margin</span><span style="color: black;">:</span> <span style="color: black;">calc</span><span style="color: black;">((</span><span style="color: black;">100</span><span style="color: black;">%</span> <span style="color: black;">-</span> <span style="color: black;">100px</span><span style="color: black;">)</span> <span style="color: black;">/</span> <span style="color: black;">2</span><span style="color: black;">);</span>
<span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100px</span><span style="color: black;">;</span>
<span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">100px</span><span style="color: black;">;</span>
<span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">red</span><span style="color: black;">;</span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">优点：感觉不到有什么优点 </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">缺点：不仅<span style="color: black;">必须</span>提前<span style="color: black;">晓得</span>div的宽高，<span style="color: black;">况且</span>浏览器对calc的属性支持程度不一，会有兼容问题。不<span style="color: black;">举荐</span><span style="color: black;">运用</span>，<span style="color: black;">意见</span><span style="color: black;">做为</span><span style="color: black;">认识</span></p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">接下来是不固定宽高的div</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为方便演示，还是默认宽高各为100px的div</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>四：absolute + margin: auto;</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">wrapper</span><span style="color: black;">{</span>
<span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">relative</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;">.</span><span style="color: black;">content</span><span style="color: black;">{</span>
<span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">absolute</span><span style="color: black;">;</span>
<span style="color: black;">left</span><span style="color: black;">:</span> <span style="color: black;">0</span><span style="color: black;">;</span>
<span style="color: black;">right</span><span style="color: black;">:</span> <span style="color: black;">0</span><span style="color: black;">;</span>
<span style="color: black;">top</span><span style="color: black;">:</span> <span style="color: black;">0</span><span style="color: black;">;</span>
<span style="color: black;">bottom</span><span style="color: black;">:</span> <span style="color: black;">0</span><span style="color: black;">;</span>
<span style="color: black;">margin</span><span style="color: black;">:</span> <span style="color: black;">auto</span><span style="color: black;">;</span>
<span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">red</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">优点：不<span style="color: black;">必须</span>提前<span style="color: black;">晓得</span>尺寸，兼容性好 </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">缺点：暂时<span style="color: black;">无</span>什么要说的，可能理解起来比较麻烦吧</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">解析： </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、<span style="color: black;">咱们</span>先让content脱离文档流，<span style="color: black;">而后</span>设置上右下左四个位置均为0 </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、给它固定宽高，限制<span style="color: black;">体积</span> </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3、利用margin属性，均分外边距</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/v2-ffbf3b36eb657f609e1d97378406ae70_b.jpg" style="width: 50%; margin-bottom: 20px;"></div>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>五：absolute + transform</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">content</span><span style="color: black;">{</span>
<span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">absolute</span><span style="color: black;">;</span>
<span style="color: black;">left</span><span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">%</span><span style="color: black;">;</span>
<span style="color: black;">top</span><span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">%</span><span style="color: black;">;</span>
<span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">transform</span><span style="color: black;">:</span> <span style="color: black;">translate</span><span style="color: black;">(</span><span style="color: black;">-50</span><span style="color: black;">%</span><span style="color: black;">,</span><span style="color: black;">-50</span><span style="color: black;">%</span><span style="color: black;">);</span>
<span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">red</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">优点：除了<span style="color: black;">不消</span>提前<span style="color: black;">晓得</span><span style="color: black;">体积</span><span style="color: black;">好似</span><span style="color: black;">亦</span>没什么了 </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">缺点：兼容性偏弱</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>六：父级flex布局</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">.wrapper{
display: flex;
justify-conte</div>
你说得对，我们一起加油，未来可期。 外链发布社区 http://www.fok120.com/ 你说得对，我们一起加油，未来可期。 你的话深深触动了我，仿佛说出了我心里的声音。 祝福你、祝你幸福、早日实现等。
页:
[1]