div垂直居中的几种方法

小鱼儿 2023-03-03 08:48 224阅读 0赞

#### 第一种 ####

1. 父类
    .father { 
    	height:100%; // height:100vh;
    	width:100%;
    	display:flex;
    	background-color: red;
    }
    2. 子类
    .child { 
    	height:40%;
    	width:50%;
    	margin:auto;
    	background-color: blue;
    }

![在这里插入图片描述][20200730180729839.png]

### 第二种 ###

1. 父类
    .father { 
    	height: 100%;
        width: 100%;
        position: relative;
        background-color: #eee;
     }
    2. 子类
     .child { 
    	height: 40%;
        width: 50%;
        position: absolute;
        left: 25%;
        top: 30%;
        right: 0%;
        background-color: #5FD6FF;
     }

### 第三种 ###

.father { 
        line-height: 200px;
        height: 200px;
        border: 3px solid green;
        text-align: center;
    }
    
    .child { 
        vertical-align: middle;
    	display: inline;
    }

![在这里插入图片描述][20200730185408295.png]

### 第四种 ###

1. 父类
    #box { 
    	line-height: 500px;
        height:500px;
    	width:100%;
    	text-align: center;
    	background-color: #eee;
    }
    2. 子类
     #shade { 
    	width: 200px;
        margin: auto;
     }

[20200730180729839.png]: /images/20230208/6e6efb76701c4521b58987b2ec1e1c92.png
[20200730185408295.png]: /images/20230208/fd526aaf6c85447c84b12172d2705da8.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 CSS教程:div垂直居中的N种方法

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这

怼烎@/ 2022年08月25日 15:59/ 0 赞/ 274 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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