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

╰+攻爆jí腚メ 2022-05-17 21:19 234阅读 0赞

## 方法1： “margin:auto”结合”position:absolute” ##

//css代码：
    .box1{
        width:200px;
        height:200px;
        border:solid 1px red;
        position: relative;
    }
    .box1 img{
        margin:auto;
        position:absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
    }
    
    //html代码：
    <div class="box1">
        <img src="pic.jpg" width=100 height=100/>
    </div>

![这里写图片描述][70]

## 方法2：transform结合position ##

//css代码：
    .box2{
        width:200px;
        height:200px;
        border:solid 1px red;
        position: relative;
    }
    .box2 img{
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
    
    //html代码：
    <div class="box2">
        <img src="pic.jpg" width=100 height=100/>
    </div>

![这里写图片描述][70]

## 方法3：flex方法 ##

//css代码：
    .box3{
        width:200px;
        height:200px;
        border:solid 1px red;
        display:flex;
        align-items: center;
        justify-content: center;
    }
    
    //html代码：
    <div class="box3">
        <img src="pic.jpg" width=100 height=100/>
    </div>

![这里写图片描述][70]

## 方法4：table-cell ##

//css代码：
    .box4{
        width:200px;
        height:200px;
        border:solid 1px red;
        text-align: center;
        vertical-align: middle;
        display: table-cell;
    }
    //html代码：
    <div class="box4">
        <img src="pic.jpg" width=100 height=100/>
    </div>

![这里写图片描述][70]

[70]: /images/20220518/30f7259259cf4ed891f2df9ac309627a.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 CSS文本垂直居中的几种方法

[观看更佳-点击前往][-] 一、单行文本的居中 1.文字水平居中 <div class='box' style="tex

青旅半醒/ 2022年12月13日 14:02/ 0 赞/ 293 阅读

相关 CSS-水平/垂直居中的方法

[转载原文][Link 1] [可以参考][Link 2] 水平居中块级元素居中 HTML 结构 <div class="parent">

你的名字/ 2022年12月03日 02:25/ 0 赞/ 235 阅读

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

CSS 水平垂直居中的方法 CSS 水平垂直居中的方法水平居中水平垂直居中 HTML文件模板居中元

谁践踏了优雅/ 2022年10月22日 05:25/ 0 赞/ 242 阅读

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

> 单行内容居中单行文字居中，只需要设置文字的line-height属性和父容器等高即可。 <div class="box"> <p>我是

傷城~/ 2022年07月28日 04:28/ 0 赞/ 251 阅读

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

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

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

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

`<div ``class``="app app1"><span>垂直居中的元素</span></div>` 一： `.app1{` ` ``display: ta

灰太狼/ 2022年03月25日 13:10/ 0 赞/ 308 阅读

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

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

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

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

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

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

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

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

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