css設置元素垂直居中的幾個方法

時間 2019-12-01

標籤 css 設置元素垂直居中幾個方法欄目 CSS 简体版

原文原文鏈接

最近有人問我怎麼設置元素垂直居中？我....（這麼基礎的東西都不會？我有點說不出話來），不過仍是耐心的教了他幾個方法，好吧教完他們，順便把這些方法整理一下css

第一種：經過設置成爲表格元素的方式來實現垂直居中（適應於父級有固定高度的元素）html

　　第一步，寫html代碼，以下：佈局

　　<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　　<meta charset="utf-8"/>
　　　　　　<title>元素垂直居中</title>
　　　　</head>
　　　　<body>
　　　　　　<div class="box">
　　　　　　　　<div class="box-con">
　　　　　　　　　　<div class="content">
　　　　　　　　　　　　a001
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>
　　　　</body>
　　</html>flex

　　第二步：設置css　spa

　　1. 將父元素設置爲表格元素： display: table;orm

　　2.將子元素設置爲父元素表格的單元格： display: table-cell; 　　而後設置垂直居中：vertical-align: middle;htm

　　3.將內容水平居中 margin:0 uato; 這樣就能夠垂直和水平都居中了blog

　　<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　　<meta charset="utf-8"/>
　　　　　　<title>元素垂直居中</title>
　　　　　　<style type="text/css">
　　　　　　　　.box{
　　　　　　　　　　width:80%;
　　　　　　　　　　height:500px;
　　　　　　　　　　padding:100px 0;
　　　　　　　　　　margin:0 auto;
　　　　　　　　　　background-color: #e4963c;
　　　　　　　　　　display: table; /*將父級元素設置成爲一個塊級表格元素*/
　　　　　　　　}
　　　　　　　　.box-con{
　　　　　　　　　　display: table-cell; /*將子元素設置成爲父元素表格的單元格*/
　　　　　　　　　　vertical-align: middle; /*該屬性設置元素內容的垂直對齊方式。*/
　　　　　　　　}
　　　　　　　　.content{
　　　　　　　　　　width:50%;
　　　　　　　　　　margin:0 auto;
　　　　　　　　　　background-color: #f00;
　　　　　　　　}
　　　　　</style>
　　　</head>
　　　<body>
　　　　　<div class="box">
　　　　　　　<div class="box-con">
　　　　　　　　<div class="content"> 　　//注：content 就是表格的內容，因此其實設置的就是這個div居中，去掉這個div,直接寫內容也是直接將內容居中的utf-8

　　　　　　　　　　a001
　　　　　　　　</div>
　　　　　　 </div>
　　　　</div>
　　　</body>
　</html>it

　注意：有時候會出現上邊距比下邊距多的問題，這樣的話再父級設置font-size:0; 而後從新給內容設置font-size（由於父級設置了font-size:0;因此內容必定要設置了font-size才能正常顯示）

　　效果圖：（這個效果圖不是這個代碼出來的效果圖，可是是同樣的寫法出來的效果圖，這裏多了一個內容002, 寫來作對比用的）

第二種方法：經過改變佈局的方式來實現

　　1. 給父級元素設置 display: flex; 設置爲fiex佈局　　而後：align-items: center; 設置該元素的內容垂直居中

　　2.子級元素設置margin:0 auto; 水平居中

　　代碼以下：　

　　<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　　<meta charset="utf-8"/>
　　　　　　<title>元素垂直居中</title>
　　　　　　<style type="text/css">
　　　　　　　　.box{
　　　　　　　　　　width:80%;
　　　　　　　　　　height:400px;
　　　　　　　　　　background-color: #d65412;
　　　　　　　　　　margin:0 auto;
　　　　　　　　　　display: flex;　　//將元素設置爲fiex佈局
　　　　　　　　　　align-items: center;　　//設置元素的內容垂直居中

　　　　　　　　　　justify-content:center; /*將元素內容設置爲水平居中*/ /*也能夠在子元素中設置margin:0 auto;來水平居中*/

　　　　　　　　}
　　　　　　　　.content{
　　　　　　　　　　width:50%;
　　　　　　　　　　background-color: #ffaf0f;
　　　　　　　　　　/* margin:0 auto; */　//設置元素水平居中
　　　　　　　　　　text-align: center;
　　　　　　　　}
　　　　　　</style>
　　　　</head>
　　　　<body>
　　　　　　<div class="box">
　　　　　　　　<div class="content">
　　　　　　　　　　a001a
　　　　　　　　</div>
　　　　　　</div>
　　　　</body>
　　</html>

　　效果圖：

第三種方法，經過設置margin 或 padding 來實現　　這個方法處理垂直居中是最靈活的，而且不用父級元素設置固定高度。

　　　　　　}
　　　　　　.boxs{
　　　　　　　　width:20%;
　　　　　　　　background-color: #f00;
　　　　　　　　margin:0 auto;　　//設置元素水平居中

　　　　　　　　text-align: center;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="box">
　　　　　　<div class="boxs">
　　　　　　　　a000
　　　　　　</div>
　　　　</div>
　　</body>
</html>

效果：

　　毫無疑問這個方法是作好的方法，簡單方便，而且沒有父級高度限制，根據子級內容自動撐開無論何時都保持在父級元素中

固然還能夠經過設置子級元素的外邊距來實現，效果同樣：

　　<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　　<meta charset="utf-8"/>
　　　　　　<title>垂直居中</title>
　　　　　　<style type="text/css">
　　　　　　　　.box{
　　　　　　　　　　width:85%;
　　　　　　　　　　background-color: #e4963c;
　　　　　　　　　　margin:0 auto;
　　　　　　　　　　/*padding:100px 0;*/
　　　　　　　　　　overflow: hidden; //由於直接在子級元素設置margin會致使出現邊距合併問題，因此加上overflow: hidden;是爲了解決邊距合併問題，讓子元素的margin生效。
　　　　　　　　}
　　　　　　　　.boxs{
　　　　　　　　　　width:20%;
　　　　　　　　　　background-color: #f00;
　　　　　　　　　　margin:100px auto; //設置上下邊距同樣，也就至關於對於父級元素垂直居中了
　　　　　　　　　　text-align: center;
　　　　　　　　}
　　　　　　</style>
　　　　</head>
　　　　<body>
　　　　　　<div class="box">
　　　　　　　　<div class="boxs">
　　　　　　　　　　a000
　　　　　　　　</div>
　　　　　　</div>
　　　　</body>
　　</html>

第四種方法，定位

　　使用定位來進行居中也是比較經常使用的，可是仍是要設置父級高度的狀況下才能使用，不夠靈活。

　　這裏要注意的是設置top:50%; left:50%;是指父級元素的中心點，子級內容從這裏開始顯示。

　　因此須要內容自身向左和向上偏移自身的一半，這樣內容纔是真正的居中。

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8"/>
　　　　<title>定位設置垂直居中</title>
　　　　<style type="text/css">
　　　　　　.box{
　　　　　　　　width:80%;
　　　　　　　　height:400px;
　　　　　　　　margin:0 auto;
　　　　　　　　background-color: #0f0;
　　　　　　　　position: relative;
　　　　　　}
　　　　　　.boxa{
　　　　　　　　width:30%;
　　　　　　　　background-color: #f00;
　　　　　　　　position: absolute;
　　　　　　　　top:50%;
　　　　　　　　left:50%;
　　　　　　　　transform: translate(-50%, -50%);

　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="box">
　　　　　　<div class="boxa">
　　　　　　　　a000sd
　　　　　　</div>
　　　　</div>
　　</body>
</html>