css 使div水平垂直居中的几种方法

刺骨的言语ヽ痛彻心扉 2022-12-16 06:27 142阅读 0赞

一、脱离文档流元素的居中  
方法一：margin:auto法

div{ 
          width: 300px;
          height: 300px;
          position: relative;
          border: 1px solid #465468;
     }
     img{ 
          position: absolute;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
     }

方法二：负margin法

.container{ 
          width: 500px;
          height: 400px;
          border: 2px solid #379;
          position: relative;
     }
     .inner{ 
          width: 480px;
          height: 380px;
          background-color: #746;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -190px; /*height的一半*/
          margin-left: -240px; /*width的一半*/

二、未脱离文档流元素的居中  
方法一：table-cell法

div{ 
        width: 260px;
        height: 230px;
        border: 3px solid #555;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    img{ 
        vertical-align: middle;

方法二：弹性盒子法

.container{ 
          width: 300px;
          height: 200px;
          border: 3px solid #546461;
          display: -webkit-flex;
          display: flex;
          -webkit-align-items: center;
          align-items: center;
          -webkit-justify-content: center;
          justify-content: center;
     }
     .inner{ 
          border: 3px solid #458761;
          padding: 20px;
    ｝

发表评论取消回复

表情：

评论列表（有 0 条评论，142人围观）

还没有评论，来说两句吧...

相关阅读

相关 div+css 元素水平居中及垂直居中的几种写法

CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HT

野性酷女/ 2023年06月27日 03:50/ 0 赞/ 15 阅读

相关 div垂直居中的几种方法

第一种 1. 父类 .father { height:100%; // height:100vh; width:100%;

小鱼儿/ 2023年03月03日 08:48/ 0 赞/ 210 阅读

相关 css 使div水平垂直居中的几种方法

一、脱离文档流元素的居中方法一：margin:auto法 div{ width: 300px; height: 300

刺骨的言语ヽ痛彻心扉/ 2022年12月16日 06:27/ 0 赞/ 143 阅读

相关 div盒子在页面中水平垂直居中的几种方法。

方法一：设置绝对定位absolute，然后margin为自动 <html lang="en"> <head> <meta charset=

谁借莪１个温暖的怀抱￠/ 2022年06月11日 06:43/ 0 赞/ 191 阅读

相关 CSS水平垂直居中的几种方法

方法1： “margin:auto”结合”position:absolute” //css代码： .box1{ width:200px;

╰+攻爆jí腚メ/ 2022年05月17日 21:19/ 0 赞/ 244 阅读

相关 CSS水平居中，垂直居中，水平垂直居中

本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： ![640?wx\_fmt=png][640_wx_fmt_png] ![640

小咪咪/ 2022年02月15日 14:53/ 0 赞/ 435 阅读

相关让div垂直水平居中的几种方法

参考文档：[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/92][https_git

r囧r小猫/ 2021年11月10日 06:04/ 0 赞/ 390 阅读

相关 CSS垂直水平居中的几种方法

作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到“使用css居中”的效果，今天就写一篇关于css垂直水平居中的几种方法。 ![aHR0cHM6Ly91c

柔光的暖阳◎/ 2021年10月24日 01:14/ 0 赞/ 808 阅读

相关 div水平垂直居中的方法

在平时，我们经常会遇到让一个div框针对某个模板上下左右都居中(水平垂直居中)，其实针对这种情况，我们有很多种方法实现。方法一：绝对定位法，不确定当前div

本是古典何须时尚/ 2021年07月25日 12:55/ 0 赞/ 521 阅读

相关 div盒子水平垂直居中的方法

<div class="wrapper"> 我不知道我的宽度和高是多少，我要实现水平垂直居中。 </div> 一、盒子没有固定的

╰半橙微兮°/ 2021年07月24日 11:26/ 0 赞/ 510 阅读