CSS实现居中的各样办法
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>CSS实现元素居中在<span style="color: black;">实质</span>应用中非常<span style="color: black;">平常</span>，下边我说一下我所总结的几个实现元素居中的<span style="color: black;">办法</span>。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">html基本代码</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="father">
<div class="child"></div>
</div></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">css基本代码</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">* {
margin: 0;
padding: 0;
}
.father {
width: 100%;
height: 600px;
bac<span style="color: black;">公斤</span>round-color: #8d8d8d;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>一</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>position: absolute 和 transform实现居中，此时父级应有position: relative属性</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.child {
width: 300px;
height: 300px;
bac<span style="color: black;">公斤</span>round-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>二</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>position: absolute 和 margin、left、right实现居中，此时父级应有position: relative属性</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.child {
width: 300px;
height: 300px;
bac<span style="color: black;">公斤</span>round: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>三</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">设置上下<span style="color: black;">上下</span>都为0，并<span style="color: black;">运用</span>margin auto实现居中，此时父级应有position: relative属性</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.child {
width: 300px;
height: 300px;
bac<span style="color: black;">公斤</span>round: red;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>四</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>relative和margin auto实现，此时父级<span style="color: black;">必须</span>设置overflow:hidden（将父级设置为BFC）</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.child {
position: relative;
width: 300px;
height: 300px;
margin: 150px auto;
bac<span style="color: black;">公斤</span>round: red;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>五</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>display: flex,align-items: center,justify-content: center</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.father {
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 300px;
height: 300px;
bac<span style="color: black;">公斤</span>round: red;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>六</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>display: flex,margin: auto</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.father {
display: flex;
}
.child {
margin: auto;
width: 300px;
height: 300px;</div>
可以发布外链的网站 http://www.fok120.com/ 感谢楼主的分享！我学到了很多。 我完全赞同你的观点，思考很有深度。
页:
[1]