CSS实现父级元素属性display为block的元素垂直和水平居中的三种方法

来源：互联网发布：php爬虫程序编辑：程序博客网时间：2024/06/02 07:11

先上代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style>        .box {            width: 100%;            height: 500px;            background: green;        }        .content {            width: 200px;            height: 200px;            background: orange;        }    </style></head><body>    <div class="box">        <div class="content"></div>    </div></body></html>

效果图
这里写图片描述

要求，要使类为content的div在类box中水平居中。
这中情况下。要是.content在.box中水平居中，我想大家都会，在.content上添加margin: 0 auto;
修改代码：

<style>        .box {            width: 100%;            height: 500px;            background: green;        }        .content {            width: 200px;            height: 200px;            background: orange;            margin: 0 auto; /*水平居中*/        }    </style>

这里写图片描述

现在问题来了，如何使.content垂直居中呢？当然vertical-align:middle肯定是不行的。

方法一、通过top和margin-top

如果要使用top那么就得设置.content的position为absolute，那么为什么不用relative或fixed呢？
首先解释relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
再解释fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
因为我们还要设置magin-top的值，使用relative会影响.box的大小，大家可自行试试看看效果，如果使用fixed，就会成为相对整个浏览器的定位了。
如果使用了absolute那么.content的父级.box的position要为relative，修改代码如下：
设置top为50%，margin-top为.content高度的一半负数值

<style>        .box {            width: 100%;            height: 500px;            background: green;            position: relative;        }        .content {            width: 200px;            height: 200px;            background: orange;            margin: 0 auto; /*水平居中*/            position: absolute;            top: 50%;            margin-top: -100px;        }    </style>

这里写图片描述
大家发现，垂直方向是居中了，怎么水平居中消失了呢。就像解释.content 的position为什么不能为relative的原因相似，使用absolute(元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框)就不会影响原来的文档流了。所以margin属性也就失效了。这样水平居中和垂直居中的方法类似了：
设置left为50%，margin-left为.content高度的一半负数值

<style>        .box {            width: 100%;            height: 500px;            background: green;            position: relative;        }        .content {            width: 200px;            height: 200px;            background: orange;            position: absolute;            top: 50%;            margin-top: -100px;            left: 50%;            margin-left: -100px;        }    </style>

这里写图片描述
搞定了，有木有！

方法二、通过top和transform

既然用不到margin属性了，那么position值可以设置为relative或absolute
如果使用absolute那么用法跟方法一差不多，只需要把margin-top: -100px;替换成transform: translateY(-50%);

<style>        .box {            width: 100%;            height: 500px;            background: green;            position: relative;        }        .content {            width: 200px;            height: 200px;            background: orange;            position: absolute;            top: 50%;            transform: translateY(-50%);            left: 50%;            margin-left: -100px;        }    </style>

或者把margin-top: -100px;和margin-left: -100px;去掉换成

<style>        .box {            width: 100%;            height: 500px;            background: green;            position: relative;        }        .content {            width: 200px;            height: 200px;            background: orange;            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%,-50%);        }    </style>

如果使用relative，代码为：

<style>        .box {            width: 100%;            height: 500px;            background: green;        }        .content {            width: 200px;            height: 200px;            background: orange;            position: relative;            top: 50%;            transform: translateY(-50%);            margin: 0 auto;        }    </style>

效果图：
这里写图片描述
都是可以的有木有！

方法三、使用display、align-items和justify-content

上代码：

<style>        .box {            width: 100%;            height: 500px;            background: green;            display: flex;            align-items: center; /*定义body的元素垂直居中*/            justify-content: center; /*定义body的里的元素水平居中*/        }        .content {            width: 200px;            height: 200px;            background: orange;        }    </style>

这里写图片描述
也是可以的！

对于display的值为flex，如果想了解弹性布局的可以看阮一峰老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

阅读全文

0 0