html元素水平居中

在網(wǎng)頁中將 HTML 元素水平居中，可以使用 CSS 中的 margin: 0 auto; 屬性。以下是一種常用的實現(xiàn)方法：

<!DOCTYPE html>

<head>

<title>Horizontal Centering</title>

<style>

.center {

width: 300px; /* 設(shè)置元素寬度 */

margin: 0 auto; /* 水平居中 */

background-color: lightblue;

padding: 20px;

}

</style>

</head>

<body>

<p>This element is horizontally centered.</p>

</div>

</body>

</html>

在上面的示例中， center 類的元素使用了 width: 300px; 來設(shè)置寬度，然后通過 margin: 0 auto; 來實現(xiàn)水平居中。這樣，無論屏幕寬度如何變化，元素都會始終水平居中顯示。

您也可以將此樣式應(yīng)用到任何 HTML 元素（例如 div 、 span 、 p 等），以實現(xiàn)水平居中效果。

SS中文字居中顯示的方式有以下五種：

使用text-align屬性設(shè)置文本的對齊方式

將text-align屬性值設(shè)置為center可以將文本居中顯示。

.center {
  text-align: center;
}

使用vertical-align屬性設(shè)置元素的垂直對齊方式

將vertical-align屬性值設(shè)置為middle可以將文本垂直居中顯示。

.center {
  vertical-align: middle;
}

使用line-height屬性設(shè)置行高

將line-height屬性值設(shè)置為比字體大小略大的值，可以使文本在容器中垂直居中顯示。

.center {
  line-height: 20px;
}

使用display

display: flex屬性將父元素設(shè)置為彈性布局，并使用align-items: center屬性將子元素在交叉軸上居中對齊。

.center {
  display: flex;
  align-items: center;
}

使用position

position: absolute屬性和transform: translateY(-50%)將子元素相對于其父元素垂直居中對齊。

// 父容器
.center {
  position: relative;
  height: 200px;
}

// 子容器
.center > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  height: 100px;
  width: 200px;
  background-color: #ccc;
}

以上就是CSS中文字居中顯示的幾種方式，根據(jù)實際需求選擇合適的方式即可。

.水平居中的 margin：0 auto;

關(guān)于這個，大家也不陌生做網(wǎng)頁讓其居中用的比較多, 這個是用于子元素上的，前提是不受float影響

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            /*text-align: center;*/
        }
        img{
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
    </style>

<!--html-->
<body>
    <div class="box">
        ![](img1.jpg)
    </div>
</body>

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，去年我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費(fèi)獲取。

2.水平居中 text-align：center；

img的display：inline-block；類似一樣在不受float影響下進(jìn)行實在父元素上添加效果讓它進(jìn)行水平居中

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            text-align: center;
        }
        img{
            display: inline-block;
            width: 100px;
            height: 100px;
            /*margin: 0 auto;*/
        }
    </style>

<!--html-->
<body>
    <div class="box">
        ![](img1.jpg)
    </div>
</body>

3.水平垂直居中（一）定位和需要定位的元素的margin減去寬高的一半
這種方法的局限性在于需要知道需要垂直居中的寬高才能實現(xiàn)，經(jīng)常使用這種方法

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;
        }
        img{
            width: 100px;
            height: 150px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -50px;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](2.jpg)
    </div>
</body>

4.水平垂直居中（二）定位和margin:auto;
這個方法也很實用，不用受到寬高的限制,也很好用

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;

        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](3.jpg)
    </div>
</body>

5.水平垂直居中（三）絕對定位和transfrom
這個方法比較高級了，用到了形變，據(jù)我所知很多大神喜歡使用這個方法進(jìn)行定位，逼格很高的，學(xué)會后面試一定要用！這個是不需要知道居中元素的寬高就可以使用的，代碼里的圖片稍微有點(diǎn)大，改改寬高，僅此而已，在面試中大部分人會問如果不知道寬高該如何居中，答這個，加分！對transform不了解的同學(xué)可以查閱一下資料了解一下！

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 300px;
        height: 300px;
        background:#e9dfc7; 
        border:1px solid red;
        position: relative;

    }
    img{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](4.jpg)
    </div>
</body>

6.水平垂直居中（四）diplay：table-cell

其實這個就是把其變成表格樣式，再利用表格的樣式來進(jìn)行居中，很方便

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        img{
            width: 100px;
            height: 150px;
            /*margin: 0 auto;*/  這個也行
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](5.jpg)
    </div>
</body>

7.水平垂直居中（五）flexBox居中

這個用了C3新特性flex,非常方便快捷，在移動端使用完美，pc端有兼容性問題，以后會成為主流的

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: flex;
            justify-content: center;
            align-items:center;
        }
        img{
            width: 150px;
            height: 100px;
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](6.jpg)
    </div>
</body>

8.水平垂直居中（六）利用vertical-align:middle;
這方法不常見，但是一位朋友補(bǔ)充后我覺得也不失為一種好方法可以讓別人刮目相看，這個方法關(guān)鍵要有一個和容器一樣高的元素作為居中的一個參照就像b元素一樣

<style>
    .wrap{
            width:300px;
            height:300px; 
            background:rgba(0,0,0,0.5);
            text-align:center;
            font-size:0;
            }
    .vamb{
        display:inline-block; 
        width:0px;
        height:100%;
        vertical-align:middle;
        }
    .test{
        display:inline-block;
        vertical-align:middle;
        font-size:16px;
        text-align:left;
        background:red;
        }
</style>
<body>
    <div class="wrap">
        <b class="vamb"></b>
        <div class="test">
        寬高不定<br>
        垂直水平居中
        </div>
    </div>
</body>

常見又實用的例子就先寫到這，歡迎提意見，謝謝大家！喜歡請關(guān)注點(diǎn)個贊，也是對我的支持和鼓勵！

作者：coderLfy鏈接：https://www.jianshu.com/p/a7552ce07c88

在線咨詢

上一篇：HTML的frame框架使用完整總結(jié)（web初學(xué)必看）
下一篇：前端修煉之旅：HTML基礎(chǔ)入門篇

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。