Html5怎么實(shí)現(xiàn)元素水平垂直居中

發(fā)布時(shí)間：2022-04-27 16:20:16 來源：億速云閱讀：203 作者：iii 欄目：大數(shù)據(jù)

今天小編給大家分享一下Html5怎么實(shí)現(xiàn)元素水平垂直居中的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

元素的水平垂直居中

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怎么實(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怎么實(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怎么實(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怎么實(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怎么實(shí)現(xiàn)元素水平垂直居中

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

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

繪畫 canvas 元素
用于媒介回放的 video 和 audio 元素
本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
語意化更好的內(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支持通過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]-->

以上就是“Html5怎么實(shí)現(xiàn)元素水平垂直居中”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

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

Html5怎么實(shí)現(xiàn)元素水平垂直居中

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽