水平居中的方法:

1、父级text-align:center;

.parent{
text-align: center;
}
.child{
display: inline-block;
}

2、table配合margin

.child{
display:table;
margin: 0 auto;
}

3、使用定位

.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
transform: translateX(-50%);
}

垂直居中的方法:

1、table-cell配合vertical-align

.parent{
display: table-cell;
vertical-align:middle;
}

2、absolute配合tranform

.parent{
position:relative;
}
.child{
position:absolute;
top: 50%;
transform: translateY(-50%);
}

3、全能的flex

.parent{
display: flex;
justify-content: center;
align-items: center;
}

css3实现水平、垂直居中的更多相关文章

  1. css3实现水平垂直居中------(特别注意,里边的固定还是不固定)

    a,----定位方式(父元素宽高固定,子元素宽高固定) <div class="Father"> <div class="children"& ...

  2. css3实现水平垂直居中

    1.transform实现居中(未设宽高) <div id="wrap">内容</div> <style> #wrap{ padding:50p ...

  3. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  4. 用CSS/CSS3 实现水平居中和垂直居中,水平垂直居中的方式

    一.水平居中 (1)行内元素解决方案:父为块元素+text-align: center 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: 使用te ...

  5. css3种不知道宽高的情况下水平垂直居中的方法

    第一种:display:table-cell 组合使用display:table-cell和vertical-align.text-align,使父元素内的所有行内元素水平垂直居中(内部div设置di ...

  6. 水平垂直居中div(css3)

    一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta cha ...

  7. css3 flex 详解,可以实现div内容水平垂直居中

    先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...

  8. css3不定宽高水平垂直居中

    1 justify-content:center;//子元素水平居中 2 align-items:center;//子元素垂直居中 3 display:-webkit-flex; 在父级元素上面加上上 ...

  9. CSS3/CSS之居中解析(水平+垂直居中、水平居中,垂直居中)

    首先,我们来看下垂直居中: (1).如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度! <!DOCTYPE html> <html lang=&quo ...

  10. css3水平垂直居中(不知道宽高同样适用)

    css水平垂直居中 第一种方法: 在父div里加: display: table-cell; vertical-align: middle; text-align: center; 内部div设置: ...

随机推荐

  1. Appium学习笔记2_Android获取元素篇

    在利用Appium做自动化测试时,最重要的一步就是获取对应的元素值,根据元素来对对象进行对应的操作,如果获得对象元素呢? Appium Server Console其实提供了一个界面对话框" ...

  2. java中的equals和==

    下面是我看别人博客和java API总结的 首先得明确一个概念就是: == 的用法   ==比较对象在内存中的地址是否相等.如是是两个基本数据类型变量的比较则比较的是这两个变量值是否相等,若是比较两个 ...

  3. @Autowired的使用:推荐对构造函数进行注释

    在编写代码的时候,使用@Autowired注解是,发现IDE报的一个警告,如下: Spring Team recommends "Always use constructor based d ...

  4. eclipse里面找不到databaseexplorer

    在window==>show view==>Other==>Data Management==>Database explorer配置:在右下方点击Database Sourc ...

  5. HMM模型学习笔记(前向算法实例)

    HMM算法想必大家已经听说了好多次了,完全看公式一头雾水.但是HMM的基本理论其实很简单.因为HMM是马尔科夫链中的一种,只是它的状态不能直接被观察到,但是可以通过观察向量间接的反映出来,即每一个观察 ...

  6. BBS论坛项目

    一.表结构设计: 1.帖子: class Article(models.Model): title = models.CharField(max_length=255,unique=True) cat ...

  7. mvc 中英文切换

    我常用的2个方案,其实性质是一样的 方案1,使用过滤器 ActionFilterAttribute,这个就不细说了,比较方便. 实现一个继承自ActionFilterAttribute的类,实现OnA ...

  8. MVC DropDownList

    最近发现一个 MVC中绑定前台DropDownList , 并且设置默认选中项的简单方法. 直接上代码 方案一 Action:  ViewData["goodsTypeList"] ...

  9. MT【239】离心率最大

    已知点$A$为椭圆$\dfrac{x^2}{a^2}+\dfrac{y^2}{b^2}=1(a>b>0)$的左顶点,$O$为坐标原点,过椭圆的右焦点$F$作垂直于$x$轴的直线$l$.若直 ...

  10. BZOJ 193题纪念