四种垂直居中的方法

四种垂直居中的方法

  显示效果:

        

  代码:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>四种垂直居中的方法</title>
 6     </head>
 7     <body>
 8         <h1>方法一:</h1>
 9         <div style="width:200px;height:200px;border:solid blue;position:relative;">
10             <div style="width:100px;height:100px;margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0; background: red;"></div>
11         </div>
12
13         <h1>方法二:</h1>
14         <div style="width:200px;height:200px;border:2px solid #000;display:table-cell;vertical-align:middle;text-align: center;">
15             <div style="width:100px;height:100px;display:inline-block;background-color: red;"></div>
16         </div>
17
18         <h1>方法三:</h1>
19         <div style="width:200px;height:200px; border:2px solid #000;display:flex;justify-content:center;align-items:center;">
20             <div style="width:100px;height:100px;background-color: red;"></div>
21         </div>
22
23         <h1>方法四:</h1>
24         <div style="width:200px;height:200px; border:2px solid #000;position:relative;">
25             <div style="width:100px;height:100px;margin:auto;position:absolute;left:50%;top:50%;margin-left: -50px;margin-top:-50px;background-color: red;"></div>
26         </div>
27     </body>
28 </html>

原文地址:https://www.cnblogs.com/firstflying/p/10708113.html

时间: 2024-09-29 05:20:27

四种垂直居中的方法的相关文章

产品经理常用的四种需求收集方法简述

A 客户访谈 客户访谈是通过面对面的交流方式了解具体客户对产品.对流程的需求.观点和看法. 客户访谈的内容可以包括: 1.了解哪些需求对客户比较重要. 2.就了解到的一些需求请客户协助进行优先排序. 3.就问题改进建议的初步想法与客户进行讨论,确认是否能够满足客户需求. 客户访谈的优点包括: 1.由于是面对面的交流,因此在调查内容上更加灵活,可以随时根据问答状况就一些内容进行深入讨论,获得更多的客户感受. 2.客户可以再调查人的协助下,进行一些较为复杂的问卷调查. 3.客户访谈方式的适用面广,可

四种数据保持方法

IOS 四种保存数据的方式 (2013-04-02 15:04:53) 转载▼ 在iOS开发过程中,不管是做什么应用,都会碰到数据保存的问题.将数据保存到本地,能够让程序的运行更加 流畅,不会出现让人厌恶的菊花形状,使得用户体验更好.下面介绍?一下数据保存的方式: 1.NSKeyedArchiver:采用归档的形式来保存数据,该数据对象需要遵守NSCoding协议,并且该对象对应的类必须提 供encodeWithCoder:和initWithCoder:方法.前?一个方法告诉系统怎么对对象进行编

笔试算法题(53):四种基本排序方法的性能特征(Selection,Insertion,Bubble,Shell)

四种基本算法概述: 基本排序:选择,插入,冒泡,希尔.上述算法适用于小规模文件和特殊文件的排序,并不适合大规模随机排序的文件.前三种算法的执行时间与N2成正比,希尔算法的执行时间与N3/2(或更快)成正比: 前三种算法在平均,最坏情况下都是N2,而且都不需要额外的内存:所以尽管他们的运行时间只相差常数倍,但运行方式不同: 对于已经就序的序列而言,插入排序和冒泡排序的运行时间都是O(N),但是选择排序的时间仍旧是O(N^2): 因为Insertion和Bubble都是相邻项间的比较交换,所以不会出

iOS中常用的四种数据持久化方法简介

iOS中常用的四种数据持久化方法简介 iOS中的数据持久化方式,基本上有以下四种:属性列表.对象归档.SQLite3和Core Data 1.属性列表涉及到的主要类:NSUserDefaults,一般 [NSUserDefaults standardUserDefaults]就够用了 @interface User : NSObject <NSCoding>@property (nonatomic, assign) NSInteger userID;@property (nonatomic,

Scrapy里Selectors 四种基础的方法

在Scrapy里面,Selectors 有四种基础的方法xpath():返回一系列的selectors,每一个select表示一个xpath参数表达式选择的节点css():返回一系列的selectors,每一个select表示一个css参数表达式选择的节点extract():返回一个unicode字符串,为选中的数据re():返回一串一个unicode字符串,为使用正则表达式抓取出来的内容 /html/head/title: 选择HTML文档<head>元素下面的<title> 标

Java_LIST使用方法和四种遍历arrayList方法

1.List接口提供的适合于自身的常用方法均与索引有关,这是因为List集合为列表类型,以线性方式存储对象,可以通过对象的索引操作对象.   List接口的常用实现类有ArrayList和LinkedList,在使用List集合时,通常情况下声明为List类型,实例化时根据实际情况的需要,实例化为   ArrayList或LinkedList,例如:List<String> l = new ArrayList<String>();// 利用ArrayList类实例化List集合  

最常用的四种大数据分析方法

本文主要讲述数据挖掘分析领域中,最常用的四种数据分析方法:描述型分析.诊断型分析.预测型分析和指令型分析. 当刚涉足数据挖掘分析领域的分析师被问及,数据挖掘分析人员最重要的能力是什么时,他们给出了五花八门的答案. 其实我想告诉他们的是,数据挖掘分析领域最重要的能力是:能够将数据转化为非专业人士也能够清楚理解的有意义的见解. 使用一些工具来帮助大家更好的理解数据分析在挖掘数据价值方面的重要性,是十分有必要的.其中的一个工具,叫做四维分析法. 简单地来说,分析可被划分为4种关键方法. 下面会详细介绍

Android学习—Button的四种OnClick响应方法

在Android或Java开发中,对于button的OnClickListener有下面四种实现方式,可以根据需要选择合适的用法. 方法一: 适合场景:通用  Button bt_Demo = (Button)findViewById(R.id.bt_Demo);  bt_Demo.setOnClickListener(new OnClickListener()  {   @Override   public void onClick(View v)   {    //响应Clicked事件  

java的四种取整方法

java 中取整操作提供了四种方法:分别是: public static double ceil(double a)//向上取整  public static double floor(double a)//向下取整  public static long round(double a)//四舍五入取整  public static double rint(double a)//最近取整   第一种:ceil是天花板的意思,表示向上取整.   测试: System.out.println(Mat