方法一 ：table、cell-table

思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中
优点：父元素（parent）可以动态的改变高度（table元素的特性）
缺点：IE8以下不支持

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>未知宽高元素水平垂直居中</title>

</head>

<style>

.parent1{

    display: table;

    height:300px;

    width: 300px;

    background-color: #FD0C70;

}

.parent1 .child{

    display: table-cell;

    vertical-align: middle;

    text-align: center;

    color: #fff;

    font-size: 16px;

}

</style>

<body>

    <div class="parent1">

        <div class="child">hello world-1</div>

    </div>

</body>

</html>

方法二：

思路：使用一个空标签span设置他的vertical-align基准线为中间，并且让他为inline-block，宽度为0
缺点：多了一个没用的空标签，display:inline-blockIE 6 7是不支持的(添加上：_zoom1;*display:inline)。
当然也可以使用伪元素来代替span标签，不过IE支持也不好，但这是后话了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>未知宽高元素水平垂直居中</title>

</head>

<style>

.parent2{

    height:300px;

    width: 300px;

    text-align: center;

    background: #FD0C70;

}

.parent2 span{

    display: inline-block;;

    width: 0;

    height: 100%;

    vertical-align: middle;

    zoom: 1;/*BFC*/

    *display: inline;

}

.parent2 .child{

    display: inline-block;

    color: #fff;

    zoom: 1;/*BFC*/

    *display: inline;

}

</style>

<body>

    <div class="parent1">

        <div class="child">hello world-1</div>

    </div>

    <div class="parent2">

        <span></span>

        <div class="child">hello world-2</div>

    </div>

</body>

</html>

方法三：绝对定位

思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)
优点：高大上，可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>未知宽高元素水平垂直居中</title>

</head>

<style>

.parent3{

    position: relative;

    height:300px;

    width: 300px;

    background: #FD0C70;

}

.parent3 .child{

    position: absolute;

    top: 50%;

    left: 50%;

    color: #fff;

    transform: translate(-50%, -50%);

}

</style>

<body>

<div class="parent3">

        <div class="child">hello world-3</div>

    </div>

</body>

</html>

方法四：弹性盒子flex

思路：使用css3 flex布局
优点：简单 快捷
缺点：兼容不好吧，详情见：http://caniuse.com/#search=flex

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>未知宽高元素水平垂直居中</title>

</head>

<style>

.parent4{

    display: flex;

    justify-content: center;

    align-items: center;

    width: 300px;

    height:300px;

    background: #FD0C70;

}

.parent4 .child{

    color:#fff;

}

</style>

<body>div> <div class="parent4">

        <div class="child">hello world-4</div>

    </div>

</body>

</html>

CSS未知宽高元素水平垂直居中的更多相关文章

  1. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  2. css/css3实现未知宽高元素的垂直居中和水平居中

    题目:.a{ width: 200px; height: 200px; background-color: #ccc;} <body> <div class="a" ...

  3. 未知宽高图片水平垂直居中在div

    <BODY> <div class="box"> <span class="car"></span> <i ...

  4. 未知宽高div水平垂直居中的3种方法

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  5. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  6. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  7. css多种方法实现已知宽度和未知宽度的元素水平垂直居中

    // html <div class="box-wrapper"> <div class="box"> 内部box <p>更 ...

  8. CSS中怎么设置元素水平垂直居中？

    记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

  9. css 文字和子元素水平垂直居中

    关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...

随机推荐

  1. koa-router post请求接收的参数为空

    注:koa-router路由和koa-bodyparser中间件  post请求中参数为空. 页面代码 <!DOCTYPE html> <html> <head> ...

  2. springboot-27-整合mybatis,druid连接池

    sprinboot整合mybatis, 有2种方式, 第一种完全使用注解的方式, 还有一种就是使用xml文件的方式 项目使用gradle + idea, 数据源使用druid, 多使用groovy编写 ...

  3. Linux之SElinux安全上下文件(1)

    SELinux:Secure Enhanced Linux,是美国国家安全局(NSA=The National Security Agency)和SCC(Secure Computing Courpo ...

  4. Java 容器源码分析之集合类详解

    集合类说明及区别 Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set Map ├Hashtable ├HashMap └W ...

  5. 行为型设计模式之模板方法(TEMPLATE METHOD)模式 ，策略（Strategy ）模式

    1 模板方法(TEMPLATE METHOD)模式: 模板方法模式把我们不知道具体实现的步聚封装成抽象方法,提供一些按正确顺序调用它们的具体方法(这些具体方法统称为模板方法),这样构成一个抽象基类.子 ...

  6. BeanDefinition到Bean

    转自:http://songzi0206.iteye.com/blog/1430239 当 BeanDefinition 注册完毕以后, Spring Bean 工厂就可以随时根据需要进行实例化了.对 ...

  7. centos7之使用最新版的kubeadm体验k8s1.12.0

    1.环境准备 centos7 .docker-ce18.06.1-ce.kubeadm.kubelet.kubectl 2.安装 yum安装,准备repo文件 docker: [docker-ce-s ...

  8. Deep learning with Python 学习笔记（5）

    本节讲深度学习用于文本和序列 用于处理序列的两种基本的深度学习算法分别是循环神经网络(recurrent neural network)和一维卷积神经网络(1D convnet) 与其他所有神经网络一 ...

  9. 【LeetCode题解】232_用栈实现队列（Implement-Queue-using-Stacks）

    目录 描述 解法一:在一个栈中维持所有元素的出队顺序 思路 入队(push) 出队(pop) 查看队首(peek) 是否为空(empty) Java 实现 Python 实现 解法二:一个栈入,一个栈 ...

  10. Python web 框架之 Django 基础搭建服务

    1. 需要安装 Python 和 Django 环境,Python 环境的安装我就不在多说了 2. 安装框架 Django Django 安装,推荐先装个 pip吧,easyinstall也可以,然后 ...