CSS布局中的水平垂直居中

CSS布局中的水平垂直居中

各位好,先说两句题外话。今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客。今天非常有幸开通博客,在此也写一篇关于前端开发布局中经常用到的水平垂直居中的总结。第一次写博客,可能会存在有的地方表述不是那么清晰明了还请各位多多见谅。

废话不多说了,下面进入主题:下面的例子父元素div 高600px   宽800px, 子元素div的高400px 宽300px;

  1. 知道父元素div的宽和高,子元素在父元素中水平垂直居中
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例1</title>
<style type="text/css">
.parent{
width: 800px;
height: 600px;
background-color: #bbbbc2;
overflow: hidden;
}
.child{
width: 400px;
height: 300px;
margin: 150px 200px;
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例1</div>
</div>
</body>
</html>

简单解释一下,这种方法是设置子元素的外边距达到水平垂直居中的效果,效果图如下:

CSS布局中的水平垂直居中

2.  知道父元素div的宽和高,子元素在父元素中水平垂直居中(方法2)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例2</title>
<style type="text/css">
.parent{
width: 800px;
height: 600px;
background-color: #bbbbc2;
overflow: hidden;
}
.child{
width: 400px;
height: 300px;
margin: 150px auto;
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例2</div>
</div>
</body>
</html>

示例2的效果和示例1的效果一样,就不截图占用篇幅了,大家可以自己试一下;

3.  知道父元素div的宽和高,子元素在父元素中水平垂直居中(方法3)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例3</title>
<style type="text/css">
.parent{
position: relative;
width: 800px;
height: 600px;
background-color: #bbbbc2;
overflow: hidden;
}
.child{
position: absolute;
width: 400px;
height: 300px;
left: 200px;
top: 150px;
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例3</div>
</div>
</body>
</html>

简单解释一下,其中我将父元素采用相对定位,子元素采用绝对定位,子元素设置left 和 top 的距离即可达到水平垂直居中的效果

4.  知道父元素div的宽和高,子元素在父元素中水平垂直居中(方法4)

 1 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例4</title>
<style type="text/css">
.parent{
position: relative;
width: 800px;
height: 600px;
background-color: #bbbbc2;
overflow: hidden;
}
.child{
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -200px;
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例4</div>
</div>
</body>
</html>

简单说一下,left和top采用百分比的方式取值,基数是对应父元素的宽和高。

5.  知道父元素div的宽和高,子元素在父元素中水平垂直居中(方法5)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例5</title>
<style type="text/css">
.parent{
position: relative;
width: 800px;
height: 600px;
background-color: #bbbbc2;
overflow: hidden;
}
.child{
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例5</div>
</div>
</body>
</html>

说一下,这种方法还是比较好的,translate(-50%,-50%),这里使用到了2D转换,里面又用到了百分数,不过这个百分数是基于当前元素的宽和高的,这是我自己常用的一种方式

6.  知道父元素div的宽和高,子元素在父元素中水平垂直居中(方法6)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例6</title>
<style type="text/css">
.parent{
display: flex;
justify-content: center;
align-items: center;
width: 800px;
height: 600px;
background-color: #bbbbc2;
}
.child{
width: 400px;
height: 300px;
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例6</div>
</div>
</body>
</html>

解释一下,这里面用到了flex布局,此处就先不详细讲解,后续再写专门的文章进行讲解。

7.  知道父元素div的宽和高,子元素在父元素中水平垂直居中(方法7)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例7</title>
<style type="text/css">
.parent{
display: flex;
width: 800px;
height: 600px;
background-color: #bbbbc2;
}
.child{
width: 400px;
height: 300px;
margin: auto;
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例7</div>
</div>
</body>
</html>

这里面也用到了flex布局,要听其中缘由,请听下回分解。

结束语:由于本人第一次写博客,多有不足,还请各位大神多多指教,谢谢!

flex布局参考文章:

阮一峰的文章  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

上一篇:centos下 Apache、php、mysql默认安装路径


下一篇:两款 REST 测试工具