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. git学习笔记 ---版本退回

    我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...

  2. redis连接相关命令

    命令名称:echo 语法:echo message 功能: 打印一个特定的信息message,测试时使用. 返回值: message自身 命令名称:ping 语法:ping 功能: 使用客户端向red ...

  3. 支持移动端裁剪图片插件Jcrop（结合WebUploader上传）

    (此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜 ...

  4. 查询本地ip以及ip地址库查询

    四种方法查询本地ip from urllib2 import urlopen from json import load my_ip = urlopen('http://ip.42.pl/raw'). ...

  5. linux设置网卡速率

    ethtool # ethtool ethX //查询ethX网口基本设置 # ethtool –h //显示ethtool的命令帮助(help) # ethtool –i ethX //查询ethX ...

  6. MySQL Backup--Xtrabackup备份限速问题

    在innobackupex 2.4版本中,有两个参数用来限制备份速度: --throttle=# This option specifies a number of I/O operations (p ...

  7. Python日记（二）：Python之禅

    The Zen of Python, by Tim Peters Beautiful is better than ugly. Explicit is better than implicit. Si ...

  8. Kubernetes系统基础

    Kubernetes系统基础 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.容器编排系统概述 1>.容器编排系统生态圈 Docker通过“镜像”机制极富创造性地解决了应用 ...

  9. netty websocket

    1 全局保存websocket的通道  NettyConfig.java public class NettyConfig { public static ChannelGroup group = n ...

  10. [转]Python测试框架对比----unittest, pytest, nose, robot framework对比

      测试框架 什么是框架? 框架(Framework)是整个或部分系统的可重用设计,框架是用来解决代码的组织及运行控制问题的. 在我们编写自动化脚本的时候,经常需要读取配置文件,读取数据文件,发送请求 ...