qzmjef 发表于 2024-6-30 05:23:29

用 CSS 实现元素垂直居中，有哪些好的办法？


    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.不<span style="color: black;">晓得</span>自己高度和父容器高度的<span style="color: black;">状况</span>下, 利用绝对定位只<span style="color: black;">必须</span>以下三行：</p>
            <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">parentElement</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;">childElement</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;">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;">transform</span><span style="color: black;">:</span> <span style="color: black;">translateY</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;">}</span>
            </div>
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.若父容器下<span style="color: black;">仅有</span>一个元素，且父元素设置了高度，则只<span style="color: black;">必须</span><span style="color: black;">运用</span>相对定位<span style="color: black;">就可</span></p>
            <div style="color: black; text-align: left; margin-bottom: 10px;"> <span style="color: black;">parentElement</span><span style="color: black;">{</span>
                <span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">xxx</span><span style="color: black;">;</span>
                <span style="color: black;">}</span>

                <span style="color: black;">.</span><span style="color: black;">childElement</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;">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;">transform</span><span style="color: black;">:</span> <span style="color: black;">translateY</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;">}</span>
            </div>
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">demo: </p><a style="color: black;">Edit fiddle - JSFiddle</a>
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Flex 布局：</p>
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">不<span style="color: black;">思虑</span>兼容老式浏览器的话，用Flex布局简单直观一劳永逸：</p>
            <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">parentElement</span><span style="color: black;">{</span>
            </div>
      </span></div>




mugong 发表于 2024-8-31 22:48:35

感谢你的精彩评论，带给我新的思考角度。

明月几时有 发表于 2024-9-8 02:32:26

顶楼主，说得太好了！
页: [1]
查看完整版本: 用 CSS 实现元素垂直居中，有哪些好的办法？