一文大白话讲清楚CSS元素的水平居中和垂直居中

文章目录

一文大白话讲清楚CSS元素的水平居中和垂直居中

  • 先说为啥就要讲居中,不讲别的,因为很简单,因为居中常用且关键
  • 那讲一个元素居中,先得看这个元素是个什么货色了吧
  • 一般有两种货色,
  1. 元素的宽高已知
  2. 元素的宽高未知
  • 为啥这么分,因为宽高已知的号操作啊,我都知道你多大了,然后页面就那么大,如果你不居中我就移动呗,移动到居中
  • 剩下的不知道宽高的,那没法移啊,不知道移到哪合适,那就要另外另外想办法了
  • 所以,先讲宽高已知的

1.已知元素宽高的居中方案

1.1 利用定位+margin:auto

  • 上代码
html 复制代码
<style>
    .parent{
        width: 300px;
        height: 300px;
        border: 1px solid green;
        position: relative;
    }
    .child{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>
  • 父元素设置相对定位,子元素设置绝对定位,并且子元素的4个定位属性都设置为0,这时候如果子元素没有宽高,会被拉满父元素
  • 但是这时候他有宽高,所以它显示100x100,但是这时候子元素的虚拟占位已经撑满了整个父级,如果我们再给一个margin:auto他就可以上下左右都居中了。
  • 哪有又问了,凭啥margin:auto就居中了,要是不给auto,给个margin: 10 50 50 10呢。
  • 那就会按照这个margin去排列。
  • 说白了就是这么个意思,现在父元素下子元素的虚拟占位跟父元素一样大,然后我们把子元素的位置放进去,放进去因为不一样大,就要考虑跟父元素哪个边近一点。有可能哪个都想近一点,哪个都想远一点,那怎么办,auto,你们自己看着分吧,看着分怎么分,平分呗。所以居中了。
  • 明白了没有。

1.2 利用定位+margin负值

  • 直接上代码
html 复制代码
<style>
    .parent{
        width: 300px;
        height: 300px;
        border: 1px solid green;
        position: relative;
    }
    .child{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top:50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>
  • 这个啥意思,这个好理解,就是我先把你top:50%,left:50%,如果子元素宽高小到极限的话是不是已经居中了,但是现在你有宽度各位一百,那怎么办,我在倒着往回移元素本身的一半不就OK了
  • 上图

1.3 table布局

  • 设置父元素的display:table-cell,子元素设置display:inline-block,利用vertical和text-align让所有行内块级元素水平垂直居中
  • 上代码
html 复制代码
<style>
    .parent{
        display:table-cell;
        width: 300px;
        height: 300px;
        vertical-align:middle;
        text-align: center;
        border: 1px solid black;
    }
    .child{
        display:inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>

2.未知元素宽高的居中方案

2.1利用定位+transform

  • 这个跟定位+margin-负值用法是一样的
  • 只不过margin-负值的时候我们需要负元素宽高的一半,所以我们必须先知道宽高是多少,然后才能写
  • transform的也是负值,不过translate会自动获取元素的宽高,并以元素的宽高为基准进行百分比偏移,所以我们可以设定偏移量为元素宽高的50%
  • 上代码
html 复制代码
<meta charset="utf-8">
<style>
    .parent{
        width: 300px;
        height: 300px;
        border: 1px solid green;
        position: relative;
    }
    .child{
        background-color: red;
        position: absolute;
        top:50%;
        left: 50%;
        transform:translate(-50%,-50%);
        /*用位移代替margin进行偏移了*/
        /*margin-top: -50px;*/
        /*margin-left: -50px;*/
    }
</style>
<div class="parent">
    <div class="child">我是子元素,我没有设置宽高</div>
</div>
  • 搞定

2.2 flex弹性布局

  • 这个最简单,只要父元素设置display:flex,子元素通过justify-content:center和align-items:center轻松实现居中
html 复制代码
<meta charset="utf-8">
<style>
    .parent{
        width: 300px;
        height: 300px;
        border: 1px solid green;
        display: flex;
        align-items:center;
        justify-content:center;
    }
    .child{
        background-color: red;
    }
</style>
<div class="parent">
    <div class="child">我是子元素,我没有设置宽高</div>
</div>
  • 搞定

2.3 grid网格布局

  • grid网格布局和flex弹性布局用法一毛一样,但是兼容性差
  • 直接上代码
html 复制代码
<meta charset="utf-8">
<style>
    .parent{
        width: 300px;
        height: 300px;
        border: 1px solid green;
        display: grid;
        align-items:center;
        justify-content:center;
    }
    .child{
        background-color: red;
    }
</style>
<div class="parent">
    <div class="child">我是子元素,我没有设置宽高</div>
</div>

3. 内联元素的居中布局

  • 上面讲的都是块级元素的居中方式,下面讲内联元素的
  1. 水平居中
  • 行内元素可设置text-algin:center
html 复制代码
<meta charset="utf-8">
<style>
    .parent{
        width: 500px;
        height: 300px;
        text-align: center;
        background-color: green;
    }
    .child{
        background-color: red;
    }
</style>
<div class="parent">
    <span class="child">我是子元素,我是内联元素<br>我的水平居中只需要父元素text-align:center就行</span>

</div>
  • 如果子元素的布局是flex,则父元素的justify-content:center就行
html 复制代码
<meta charset="utf-8">
<style>
    .parent{
        width: 300px;
        height: 300px;
        background-color: green;
        display: flex;
        justify-content:center
    }
    .child{
        background-color: red;
        line-height: 300px;
    }
</style>
<div class="parent">
    <span class="child">我是子元素,我是内联flex元素<br>我的水平居中只需要父元素justify-content:center就行</span>
</div>
  1. 垂直居中
  • 单行文本垂直居中,只需要让子元素的line-height=父元素的height
html 复制代码
<meta charset="utf-8">
<style>
    .parent{
        width: 600px;
        height: 300px;
        background-color: green;
        display: flex;
        justify-content:center;

    }
    .child{
        width: 400px;
        background-color: red;
        line-height: 300px;
    }
</style>
<div class="parent">
    <span class="child">单行文本,垂直居中line-height=父height</span>
</div>
  • 多行文本父元素垂直居中,可以设置父元素display:table-cell,vertical-align:middle
html 复制代码
<meta charset="utf-8">
<style>
    .parent{
        width: 600px;
        height: 300px;
        background-color: green;
        display:table-cell;
        vertical-align:middle;

    }
    .child{
        width: 400px;
        background-color: red;

    }
</style>
<div class="parent">
    <span class="child">我是多行文本,垂直居中只需要让父元素display:table-cell;vertical-align:middle</span>
</div>
相关推荐
mCell12 分钟前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830942 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮2 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel2 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip3 小时前
JavaScript事件流
前端·javascript
小菜全3 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C3 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG3 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904273 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路3 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架