CSS實現元素居中樣式（水平居中和垂直居中）

-Advertisement-

水平居中 1.text-align:center; 此用法需要滿足：父元素為塊級元素（block）可以實現塊級元素內樣式居中，子元素可以為：inline-block，inline，inline-flex 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ...

水平居中

1.text-align:center;

此用法需要滿足：父元素為塊級元素（block）

可以實現塊級元素內樣式居中，子元素可以為：inline-block，inline，inline-flex

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .main {
 8             text-align: center;
 9             background-color: green;
10         }
11         .box1 {
12             display: inline-flex;
13             width: 60px;
14             height: 60px;
15             border: 1px solid #ccc;
16         }
17         .box2 {
18             display: inline-block;
19             width: 60px;
20             height: 60px;
21             border: 1px solid #ccc;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="main">    
27     <div class="box1"></div>
28     <div class="box2"></div>
29     </div>
30 </body>
31 </html>

2.margin:0 auto;

設置要求：塊級元素（block）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .main {
 8             
 9             background-color: green;
10         }
11         .box1 {
12             width: 60px;
13             height: 60px;
14             border: 1px solid #ccc;
15             margin: 0 auto;
16         }
17         .box2 {
18             display: inline-block;
19             width: 60px;
20             height: 60px;
21             border: 1px solid #ccc;
22             margin: 0 auto;
23         }
24     </style>
25 </head>
26 <body>
27     <div class="main">    
28     <div class="box1"></div>
29     <div class="box2"></div>
30     </div>
31 </body>
32 </html>

3.利用彈性佈局實現居中

通過彈性佈局設置主軸的對齊方式（justify-content: center;）實現

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .main {
 8             display: flex;
 9             color: #fff;
10             background-color: green;
11              justify-content: center;
12         }
13         .box1 {
14             width: 60px;
15             height: 60px;
16             border: 1px solid #ccc;
17         }
18         .box2 {
19             width: 60px;
20             height: 60px;
21             border: 1px solid #ccc;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="main">    
27     <div class="box1">box1</div>
28     <div class="box2">box2</div>
29     </div>
30 </body>
31 </html>

垂直居中

1.容器height與line-height高度一致

對於內容的居中實現較為簡單，但不能對於整個元素標簽進行居中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .main {
 8             height: 180px;
 9             color: #fff;
10             background-color: green;
11             line-height: 180px;
12         }
13         .box1 {
14             width: 60px;
15             height: 60px;
16             border: 1px solid #ccc;
17             
18         }
19     </style>
20 </head>
21 <body>
22     <div class="main">    
23     <div class="box1">文本內容垂直居中</div>
24     </div>
25 </body>
26 </html>

如圖對於文本內容實現居中，但承載內容的上一級標簽並不能實現垂直居中

3.利用flex佈局實現

原理同利用flex實現水平居中相同，只需更改主軸方向即可

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .main {
 8             height:400px;
 9             display: flex;
10             color: #fff;
11             background-color: green;
12             flex-direction: column;/*更改主軸方向為垂直方向*/
13             justify-content: center;
14         }
15         .box1 {
16             width: 90px;
17             height: 90px;
18             border: 1px solid #ccc;
19             
20         }
21     </style>
22 </head>
23 <body>
24     <div class="main">    
25     <div class="box1">box1</div>
26     </div>
27 </body>
28 </html>

4.利用margin和transform實現

利用margin-top或者margin-bottom將元素移動50%；

然後通過transform在y軸進行2d移動元素高度的一半即可

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

用sql對含有時間段欄位(起始時間、結束時間)的記錄做並集處理

來自於一個基友的問題：他的博客同問題鏈接 sql時間段取並集、合併 https://blog.csdn.net/Seandba/article/details/105152412 問題：計算通道的總開放時長，只要有任意一個終端開放通道就算開放，難點在於各種終端開放時間重疊包含問題測試數據--問題一、... ...
Mysql性能優化：為什麼要用覆蓋索引？

導讀相信讀者看過很多MYSQL索引優化的文章，其中有很多優化的方法，比如最佳左首碼，覆蓋索引等方法，但是你真正理解為什麼要使用最佳左首碼，為什麼使用覆蓋索引會提升查詢的效率嗎？本篇文章將從MYSQL內部結構上講一下為什麼覆蓋索引能夠提升效率。 InnoDB索引模型在InnoDB中，表都是根據主 ...
簡單SQL語句

DDL 操作資料庫 create database db1； //創建資料庫 show databases； //查詢所有的資料庫名稱 create database if not exists db1; //先判斷資料庫db1是否存在再進行創建 create database 資料庫名 char ...
JavaScript連載1-基本簡介（組成、關係、表示形式等）

一、概覽 1.JavaScript是前端開發的一門腳本語言（解釋性語言） 2.解釋型語言的代表：（1）Python;（2）JavaScript;（3）PHP;（4）Ruby; 3.編譯型語言：程式執行之前需要一個專門的編譯過程，把程式編譯成為機器怨言的文件，比如：exe\jar文件；例如：C/C++ ...
div中圖片和文字同一行實現垂直居中

vertical-align作用對象為內聯元素display設置table-cell後，magin和padding就會失效 #bj { height:100px; color: white; font-size: 30px; margin: 10px 0; display: table-cell; ...
vue計算屬性+vue中class與style綁定

vue計算屬性在模板中放入大量的邏輯會讓模板過重且難以維護計算屬性下所有函數可以放到computed中 class與style綁定原始寫法 v-bind:class 縮寫 :class class綁定的三種形式 style的三種綁定形式屬性值為true顯示，false不顯示第一種綁定方式： ...
vue選項數據+vue模板語法

vue選項數據： data computed methods 在src-pages下新建目錄demo2，目錄中新建index.vue <template> <div>選項數據<div> <div> </div> </template> <script> export default{ data(){ ...
逆戰班-JS的形參與實參

函數的參數參數是指由外部傳入到函數中的變數，僅作為變數使用，但是該變數可以是任何內容，包括函數。被傳入的參數作為私有變數使用，可以被覆蓋掉。參數排列是嚴格按照參數的順序填入的。 JavaScript中函數的參數分為形參和實參。形參：是在定義函數時使用的參數，目的是用來接收調用該函數 ...