转载：http://www.cnblogs.com/jogen/p/5213566.html 这个博客的菜单ui还是棒棒的。

方法一 
思路：显示设置父元素为：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属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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>

方法四：
思路：使用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. CSS基础布局--居中对齐，左侧定宽右侧自适应

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

  2. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  3. CSS布局 -- 左右定宽，中间自适应

    左右定宽,中间自适应 有几种方法可以实现 改变窗口大小看看? 方案一: 左右设置绝对定位,定宽,中间设置margin-left  margin-right 查看 demo <!DOCTYPE h ...

  4. CSS布局 -- 左侧定宽，右侧自适应

    左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...

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

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

  6. css实现三栏布局，两边定宽，中间自适应

    1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #b ...

  7. css布局：定宽，自适应

    css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...

  8. css高度已知，左右定宽，中间自适应三栏布局

    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  9. 如何用CSS实现中间自适应，两边定宽三栏布局

    1.前言 用css实现“两边定宽,中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了,一般当面试者写出一种实现方法之后,面试官还会问你还有没有别的方法,尽量多的写出几种实现方法 ...

随机推荐

  1. socket：10038错误

    转自:http://blog.csdn.net/chen495810242/article/details/42029825 winSock的一个bug:当closesocket多次错误使用时会导致问 ...

  2. mysql 8.0 Druid连接时调用getServerCharset报空指针异常解决方法

    类似错误信息如下: 16:52:01.163 [Druid-ConnectionPool-Create-1641320886] ERROR com.alibaba.druid.pool.DruidDa ...

  3. <线程池-定时任务> ScheduledExecutorService之shutdown引发的RejectedExecutionException问题

    一. 问题描述 先来看一下异常信息,启动tomcat时就报错: 2015-3-20 15:22:39 org.apache.catalina.core.StandardContext listener ...

  4. bzoj 2084 Antisymmetry - Manacher

    题目传送门 需要高级权限的传送门 题目大意 对于一个01字符串,如果将这个字符串0和1取反后,再将整个串反过来和原串一样,就称作“反对称”字符串. 问给定长度为$n$的一个01串有多少个子串是反对称的 ...

  5. shell 调试脚本设置

    set -x 脚本部分内容 set +x

  6. freeswitch源码安装

    1.源码--安装依赖: yum install -y http://files.freeswitch.org/freeswitch-release-1-6.noarch.rpm epel-releas ...

  7. SpringCloud与Consul集成实现负载均衡

    一.背景 SpringCloud微服务目前比较流行,其中大都在使用的服务注册与发现是Eureka,最近研究了Consul的集群搭建,现使用Consul实现服务的负载均衡.其主要拓扑结构如下: 二.Co ...

  8. hihoCoder week8 状态压缩·一

    状态压缩  写了两个半小时  太菜了 题目链接 https://hihocoder.com/contest/hiho8/problem/1 #include <bits/stdc++.h> ...

  9. R: Coercing LHS to a list

    #  Coercing LHS to a list expr_3$ID<-rownames(expr_3) # OK ids<-rownames(expr_3)expr_4<-cbi ...

  10. 集合05_Collections工具类

    Collections工具类 提供大量方法用于操作集合,比如排序,查找,替换 同步控制 提供synchronizedXxx()方法将指定集合类包装成线程同步的集合. List<String> ...