水平居中和垂直居中的方案

先看HTML的骨架

后面的代碼都是基於這個來寫的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./style.css">

<body>
    <div class="box vertical align"></div>
</body>
</html>

水平居中

通過 margin 水平居中

/* 1. 通過margin 水平居中 */
.box {
    width: 200px;
    height: 200px;
    background-color: orange;
}
.align {
    margin: 0 auto;
}

通過 position 和 transform 水平居中

/* 2.通過 position 和 transform 水平居中 */
.box {
    width: 200px;
    height: 200px;
    background-color: orange;
}
.align {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

通過flex水平居中

body {
    display: flex;
    justify-content: center;
}

通過 text-align:center 水平居中

注意:使用text-align的時候,子元素要設置為行內塊元素,是利用了行內元素的特性
```
body {
    text-align: center;
}
.box {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: orange;
}
```

垂直居中

flex布局垂直居中

可以在父類上加 align-item:center實現垂直居中

body {
    height: 100vh;
    display: flex;
    align-items: center;
}

也可以在子類元素上加 align-self:center 實現垂直居中

.box {
    align-self: center;
    width: 200px;
    height: 200px;
    background-color: orange;
}

通過position和transform 來垂直居中

/* 第二種方案 position和transform */
.vertical{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

絕對居中

flex布局實現絕對居中

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

通過 position和transform 實現絕對居中


/* 第二種方案 position和transform */
.box {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS 各種居中方式 CSS各種居中方法 CSS水平和垂直居中方案 Spirit帶你了解如何安全引入第三方資源 Spirit帶你徹底了解事件捕獲和冒泡機制 Spirit帶你徹底搞懂JS的6種繼承方案 CSS--居中方式總結 css元素垂直居中方法 CSS圖片垂直居中方法 CSS 樣式：常用居中方法