CSS五種居中方法

1.方法一

通過寫乙個

標籤，i標籤的高度為百分之百，讓i標籤的中點和要居中元素的中點處在同一位置

<

!doctype html>
"utf-8"
>
五大居中1
<
/title>
*.box
.box .zi
.box i
<
/style>
<
/head>
="box"
>
="zi"
>
<
/div>
<
/i>
<
/div>
<
/body>
<
/html>

使用定位方法，將需要居中的元素相對其父級定位，然後通過left:0;right:0;top:0;bottom:0;margin:auto;實現居中

<

!doctype html>
"utf-8"
>
五大居中2
<
/title>
*.box
.box .zi
<
/style>
<
/head>
="box"
>
="zi"
>
<
/div>
<
/div>
<
/body>
<
/html>

先使用定位，然後將左邊的距離設為left:50%-元素自身的寬度/2

上邊距設為top:50%-元素自身的高度/2

缺點：當元素大小改變時需要重新計算減去的高度或寬度

<

!doctype html>
"utf-8"
>
五大居中3
<
/title>
*.box
.box .zi
<
/style>
<
/head>
="box"
>
="zi"
>
<
/div>
<
/div>
<
/body>
<
/html>

同樣需要用到定位，將需要定位的元素設定為left:50%;top:50%;transform:translate(-50%,-50%);

translate(-50%,-50%) 作用是，往上（x軸）,左（y軸）移動自身長寬的 50%，以使其居於中心位置

<

!doctype html>
"utf-8"
>
五大居中4
<
/title>
*.box
.box .zi
<
/style>
<
/head>
="box"
>
="zi"
>
<
/div>
<
/div>
<
/body>
<
/html>

這個用的是彈性盒中的方法，即display:flex;align-items:center（垂直居中）;justify-content:center（水平居中）;

<

!doctype html>
"utf-8"
>
五大居中5
<
/title>
*.box
.box .zi
<
/style>
<
/head>
="box"
>
="zi"
>
<
/div>
<
/div>
<
/body>
<
/html>

css居中方法

水平居中 1 文字 等行內元素的水平居中 給父元素設定text align center可以實現文字 等行內元素的水平居中。2 確定寬度的塊級元素的水平居中 通過設定margin left auto 和margin right auto 來實現的。3 不確定寬度的塊級元素的水平居中 方法一 將需要居...

css 11種垂直居中方法

1.使用絕對定位和負外邊距對塊級元素進行垂直居中 html 我是測試div css box child 執行結果如下 這個方法相容性不錯，但是有乙個小缺點 必須提前知道被居中塊級元素的尺寸，否則無法準確實現垂直居中。2.使用絕對定位和transform html 我是一串很長很長很長很長很長很長很長...

10種CSS水平垂直居中方法

編寫該博文僅僅作為梳理，鞏固學習，加強記憶。場景一 居中元素寬高已知 absolute 負 margin absolute margin auto absolute calc 場景二 居中元素寬高未知absolute transform line height writing mode table ...