qzmjef 发表于 2024-6-30 06:14:35

怎么让一个 div 水平垂直居中？


    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">
            <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>一：margin:auto</h2>
            <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>。</p>
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS代码：</p>
            <div style="color: black; text-align: left; margin-bottom: 10px;">div{
                width: 600px;
                height: 600px;
                position: relative;
                border: 1px solid #000000;
                }
                img{
                position: absolute;
                margin: auto;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                }</div>
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML代码：</p>
            <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;div&gt;
                &lt;img src="avatar.jpg"&gt;
                &lt;/div&gt;</div>
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图：</p>
            <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="data:image/svg+xml;utf8," style="width: 50%; margin-bottom: 20px;"></div>marginauto.png<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>二：flex弹性盒子法</h2>
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">利用flex，align-items:center是<span style="color: black;">掌控</span>垂直方向居中，justify-content:center是<span style="color: black;">掌控</span>水平方向的居中。</p>
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS代码：</p>
            <div style="color: black; text-align: left; margin-bottom: 10px;">div{
                width: 600px;
                height: 600px;</div>
      </span></div>




shouyou 发表于 2024-8-27 18:30:59

楼主节操掉了，还不快捡起来！

流星的美 发表于 2024-9-7 14:45:32

你的见解独到，让我受益匪浅，期待更多交流。

wrjc1hod 发表于 2024-9-26 03:51:29

系统提示我验证码错误1500次 ＼~゛，

nykek5i 发表于 2024-10-3 03:56:05

你的话语如春风拂面，温暖了我的心房，真的很感谢。

7wu1wm0 发表于 2024-10-3 10:22:53

谢谢、感谢、感恩、辛苦了、有你真好等。
页: [1]
查看完整版本: 怎么让一个 div 水平垂直居中？