溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Html5中新增標(biāo)簽與樣式實(shí)現(xiàn)元素水平垂直居中的方法

發(fā)布時(shí)間：2021-06-12 12:44:51 來(lái)源：億速云 閱讀：204 作者：小新 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)Html5中新增標(biāo)簽與樣式實(shí)現(xiàn)元素水平垂直居中的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

元素的水平垂直居中

1、利用table標(biāo)簽，自帶的功能

<style>
        .parent{
            border: 1px solid red;
            height: 500px
        }
        .child{
            border: 1px solid black
        }
    </style>
<body>
    <!--  -->
    <table class="parent">
        <tr>
            <td class="child">
                測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試
                測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試 測(cè)試
            </td>
        </tr>
    </table>
</body>

效果

Html5中新增標(biāo)簽與樣式實(shí)現(xiàn)元素水平垂直居中的方法

2、 margin-left: -50px; margin-top: -50px

 <style>
        .parent{
            position: relative;
            background-color: yellow;
            width: 500px;
            height: 200px
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: #fff;
            position:absolute;
            top:50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px

        }
    </style>

效果

Html5中新增標(biāo)簽與樣式實(shí)現(xiàn)元素水平垂直居中的方法

3、 transform: translate(-50%,-50%)

<style>
        .parent{
            width: 500px;
            height: 300px;
            border: solid 1px red;
            position: relative;
            
        }
        .child{
            width: 200px;
            height: 100px;
            border: 1px solid black;
            position:absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%)
        }
    </style>

效果

Html5中新增標(biāo)簽與樣式實(shí)現(xiàn)元素水平垂直居中的方法

4、 margin: auto;

<style>
        .p{
            width: 300px;
            height: 200px;
            border: 1px solid red;
            position: relative;
        }
        .c{
            width: 80px;
            height: 40px;
            background-color: #dedede;
            position:absolute;
            margin: auto;
            top:0;
            bottom:0;
            left: 0;
            right: 0
        }
    </style>

效果

Html5中新增標(biāo)簽與樣式實(shí)現(xiàn)元素水平垂直居中的方法

5、彈性盒

<style>
        .p{
            border: 1px solid red;
            width: 400px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center
        }
        .c{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

效果

Html5中新增標(biāo)簽與樣式實(shí)現(xiàn)元素水平垂直居中的方法

html5CSS3有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML和 HTML5？

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，地理定位等功能的增加。

繪畫(huà) canvas 元素
用于媒介回放的 video 和 audio 元素
本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
CSS3實(shí)現(xiàn)圓角，陰影，對(duì)文字加特效，增加了更多的CSS選擇器 多背景 rgba
新的技術(shù)webworker, websockt, Geolocation
移除的元素
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；是IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

- <!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

關(guān)于“Html5中新增標(biāo)簽與樣式實(shí)現(xiàn)元素水平垂直居中的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手