您的位置:首页> 前端教程> CSS教程
文章导航

CSS div居中效果

2018-8-16 00:31| 作者: admin| 查看: 1914| 评论: 0|来自: 蚂蚁部落

设置文本、内联元素或者块级内联元素设置为居中比较简单:

(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属性一章节。

3

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (4 人)

最新评论

返回顶部