CSS div居中效果

admin發表於2018-08-16
CSS

設定文字、內聯元素或者塊級內聯元素設定為居中比較簡單：

（1）.使用text-align:center可以設定為水平居中效果。

（2）.將line-height屬性值設定為容器元素高度可以實現垂直居中效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>
<style>
*{
  margin:0px;
  padding:0px;
}
body{
  text-align:center;
  height:600px;
  line-height:600px;
}
span{
  width:100px;
  height:100px;
  display:inline-block;
  background-color: red;
}
</style>  
</head>
<body>
<span></span>
</body>
</html>

但是不能設定塊級元素，下面就以div為例子，介紹一下如何實現塊級元素居中效果。

一.水平居中：

實現水平居中程式碼極其簡單，使用margin屬性即可實現：

[CSS] 純文字檢視 複製程式碼
margin:0px auto;

完整程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.ant{
  width: 150px;
  height: 80px;
  line-height: 80px;
  color: blue;
  text-align: center;
  background-color:bisque;
  margin:0px auto;
}
</style>
</head>
<body>
<div class="ant">螞蟻部落</div>
</body>
</html>

特別說明：必須要顯式指定div的寬度，否則不會具有居中效果。

二.垂直水平居中:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:300px;
  height: 200px;
  margin: 0px auto;
  background-color: #ccc;
  position: relative;
}
#ant{
  position:absolute;
  background-color: red;
  width:100px;
  height:80px;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-40px;
}
</style>
<body>
<div id="box">
  <div id="ant"></div>
</div>
</body>
</html>

上面程式碼實現了元素垂直水平居中效果，原理也非常簡單：

通過定位設定div的left和top屬性值為50%，div的左上角是居中。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/06/101718g1mmm31qs0qp5nmm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

左上角並不是整體居中，再通過負外邊距，分別將元素向上和向左移動一半的高度和寬度。

這樣就實現了div元素中心點的居中效果，如果感覺計算太麻煩，可以使用如下方式：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:300px;
  height: 200px;
  margin: 0px auto;
  background-color: #ccc;
  position: relative;
}
#ant{
  position:absolute;
  background-color:red;
  width:100px;
  height:80px;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}
</style>
<body>
<div id="box">
  <div id="ant"></div>
</div>
</body>
</html>

上述程式碼同樣實現了子div垂直水平居中效果，核心程式碼如下：

[CSS] 純文字檢視 複製程式碼
position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;

CSS3方式實現居中效果：

利用CSS3實現居中效果更為簡便，僅以一段程式碼例項為例子。

更多實現居中方式可以參閱CSS3元素居中詳解一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box{
  width:300px;
  height: 200px;
  margin: 0px auto;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
#ant{
  position:absolute;
  background-color: red;
  width:100px;
  height:80px;
}
</style>
</head>
<body>
<div id="box">
  <div id="ant"></div>
</div>
</body>
</html>

使用flex彈性佈局實現居中效果非常的便利，更多內容可以參閱相關閱讀。

相關閱讀：

（1）.display: flex參閱CSS3 flex彈性佈局一章節。

（2）.justify-content參閱CSS justify-content屬性一章節。

（3）.align-items參閱CSS3 align-items屬性一章節。

相關文章