verticle-align:middle

vertical-align:middle实现css垂直居中是常用的方法，但是需要注意，vertical生效的前提是diaplay:inline-block

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>css水平居中</title>

<style>

#out {

 background: blue;

 width: 600px;

 height: 300px;

}

#in {

 background: yellow;

 width: 50%;

 height: 50%;

 display: inline-block;

 vertical-align: middle;

}

</style>

</head>

<body>

<div id="out">

 <div id="in"></div>

 </div>

</body>

</html>

display: flex实现

display:flex实现css垂直居中的方法是给父元素display: flex;而子元素align-self:center;

<style>

#out{

background: blue;

width: 600px;

height: 300px;

display: flex;

}

#in {

background: yellow;

width: 50%;

height: 50%;

align-self: center;

}

父元素display:flex

子元素align-self:center

伪元素:before实现CSS垂直居中

<style>

#out{

background:blue;

width: 600px;

height: 300px;

display: block;

}

#out:before{

content: '';

display:inline-block;

vertical-align:middle;

height:100%;

}

#in{

background: yellow;

width: 50%;

height: 50%;

display: inline-block;

vertical-align: middle;

}

</style>

display:table-cell实现css垂直居中

给父元素display:table,子元素display: table-cell的方式实现css垂直居中。

<style>

#out {

background: blue;

width: 600px;

height: 300px;

dispaly: table;

}

#in{

background: yellow;

width: 50%;

height: 50%;

display:table-cell;

vertical-align:middle;

}

</style>

隐藏节点实现CSS垂直居中

<style>

#out{

background: blue;

width: 600px;

height: 300px;

}

#hide{

width: 50%;

 height: 25%;

}

隐藏节点的height为剩余高度的一半

#in {

background: yellow;

width: 50%;

height: 50%;

}

</style>

<body id="out">

<div id="hide"></div>

<div id="in"></div>

</body>

通过transform实现CSS垂直居中

<style>

#out {

background: blue;

width: 600px;

height: 300px;

}

#in{

background: yellow;

width: 50%;

height: 50%;

position: relative;

top: 50%;

transform: translateY(--50%);

}

</style>

line-height实现CSS垂直居中

<style>

#out {

background: blue;

width: 600px;

height: 300px;

}

#in {

 width: 50%;

 height: 50%;

 line-height: 300px;

}

</style>

<body>

<div id="out">

 <p id="in">css</p>

</div>

</body>

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774

Day14:CSS垂直居中的更多相关文章

  1. CSS垂直居中指南

    大概整理下css中的垂直居中问题 主要分两大类 1 知道块元素尺寸,一般就是指知道元素高度. 方法一:最简单的,类比水平居中. 思路:子元素设置为absolute;  top bottom都设置为0 ...

  2. python_way day14 CSS

    python_way day14 CSS 层叠样式表 一.CSS作用域: 二.css标签选择器 三.css样式 一.css作用域: 基本用法:style="样式" <body ...

  3. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  4. css垂直居中方法

    CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.

  5. CSS垂直居中完美有用实例

    <!DOCTYPE HTML>           <html>            <head>             <meta meta chars ...

  6. python_way day14 CSS，莫泰对话框

    python_way day14 CSS 层叠样式表 一.CSS作用域: 二.css标签选择器 三.css样式 四.莫泰对话框: 一.css作用域: 基本用法:style="样式" ...

  7. CSS垂直居中的8种方法

    CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...

  8. 完美实现CSS垂直居中的11种方法

    在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的 本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了. ...

  9. css 垂直居中技巧

    CSS垂直居中技巧,我只会23个,你会几个?自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十 ...

随机推荐

  1. Spark 系列（一）—— Spark简介

    一.简介 Spark 于 2009 年诞生于加州大学伯克利分校 AMPLab,2013 年被捐赠给 Apache 软件基金会,2014 年 2 月成为 Apache 的顶级项目.相对于 MapRedu ...

  2. js获取项目名称

    //获取路径 var pathName=window.document.location.pathname; //截取,得到项目名称 var projectName=pathName.substrin ...

  3. js数据类型及判断数据类型

    众所周知,js有7种数据类型 1. null 2. undefined 3. boolean 4. number 5. string 6. 引用类型(object.array.function) 7. ...

  4. TR-业务流程图

    今天看到一篇关于票据业务的培训文档,介绍比较全面,分享下: https://wenku.baidu.com/view/f3dd3ee988eb172ded630b1c59eef8c75ebf9577. ...

  5. 0001-代码仓库-mvn

    暂缺 基本介绍 web管理 ifsvnadmin

  6. windows nginx

    nginx.exe -s stop stop是快速停止nginx,可能并不保存相关信息: nginx.exe -s quit quit是完整有序的停止nginx,并保存相关信息. nginx.exe ...

  7. my.cnf参数说明

    MySQL 5.7数据库参数优化 连接相关参数 max_connections:允许客户端并发连接的最大数量,默认值是151,一般将该参数设置为500-2000 max_connect_errors: ...

  8. python高级特性-生成器

    在python中一边循环一边计算的机制成为生成器(generator) 在每次调用next()的时候执行,遇到yield语句返回,再次执行时从上次返回的yield语句处继续执行. 生成list > ...

  9. java基础（10）---stream流

    一.stream的应用场景 for遍历的冗余场景:  stream的写法: 二.获取Stream流的常用方式 三.Stream的map映射方法 更简单的写法: 四.Stream的filter过滤方法 ...

  10. c# 定时关闭 MessageBox 或弹出的模态窗口

    我们都知道,MessageBox弹出的窗口是模式窗口,模式窗口会自动阻塞父线程的.所以如果有以下代码: MessageBox.Show("内容',"标题"); 则只有关闭 ...