position 元素已知宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .father{
            background-color: #FF8C00;
            width: 600px;
            height:600px;
            position: relative;
        }
        .child{
            background-color: rosybrown;
            width: 300px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -150px;
        }
    </style>
</head>
<body>
       <div class="father">
           <div class="child">
               hello word!!!
           </div>
       </div>
</body>
</html>

position 元素未知宽度



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .father{
            background-color: #FF8C00;
            height: 300px;
            position: relative;
        }
        .child{
            background-color: #F00;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%)
        }
    </style>
</head>
<body>
       <div class="father">
           <div class="child">
               hello word!!!
           </div>
       </div>
</body>
</html>




position  可以不知道宽




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>水平垂直居中</title>

    <style>

        .father{

            background-color: #FF8C00;

            height: 500px;

            width: 500px;

           position: relative;

        }

        .child{

            background-color: #F00;

            width: 200px;

            height: 200px;

            position:absolute;

            left:0;

            top: 0;

            bottom: 0;

            right: 0;

            margin: auto;

        }

    </style>

</head>

<body>

       <div class="father">

           <div class="child">

               hello word!!!

           </div>

       </div>

</body>

</html>




flex可以不知道宽




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>水平垂直居中</title>

    <style>

        .father{

            background-color: #FF8C00;

            height: 500px;

            width: 500px;

            display: flex;/*flex布局*/

            justify-content: center;/*使子项目水平居中*/

            align-items: center;/*使子项目垂直居中*/

        }

        .child{

            background-color: #F00;

            width: 200px;

            height: 200px;

        }

    </style>

</head>

<body>

       <div class="father">

           <div class="child">

               hello word!!!

           </div>

       </div>

</body>

</html>




table-cell布局   需要三个标签  相对麻烦     因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>水平垂直居中</title>

    <style>

        .father{

            background-color: #FF8C00;

            height: 500px;

            width: 500px;

            display: table;

        }

        .child{

            background-color: #F00;

            width: 200px;

            height: 200px;

            display: table-cell;

            vertical-align: middle;/*使子元素垂直居中*/

            text-align: center;/*使子元素水平居中*/

        }

        .childInner{

            background-color: #;

            display: inline-block;/*使子元素呈现块状*/

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

       <div class="father">

           <div class="child">

              <div class="childInner"> hello word!!!</div>

           </div>

       </div>

</body>

</html>


												


											
css 水平垂直居中显示（定高不定高定宽不定宽）的更多相关文章
	

    
								
  1. CSS水平垂直居中总结
		
    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
    
		
    2. 
						
  2. css水平垂直居中
		
    margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...
    
		
    3. 
						
  3. 把简单做好也不简单-css水平垂直居中
		
    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...
    
		
    4. 
						
  4. css水平垂直居中对齐方式
		
    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
    
		
    5. 
						
  5. css 水平垂直居中总结
		
    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...
    
		
    6. 
						
  6. CSS水平垂直居中的几种方法2
		
    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
    
		
    7. 
						
  7. CSS水平垂直居中的几种方法
		
    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
    
		
    8. 
						
  8. 常见的几种 CSS 水平垂直居中解决办法
		
    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
    
		
    9. 
						
  9. HTML+CSS水平垂直居中
		
    啦啦啦,好了,今天来分享自己的第一个知识点,难得自己还能想起来过来博客园,写写博客的. 好了,言归正传,今天分享关于html和css的一个简单的知识点,对于大部分从事前端开发的人员来说可能都是很简单的 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ag 命令的帮助文档
			
    安装 the silver searcher 在各大平台上都可以从软件库直接安装.除了 Debian/Ubuntu 外,其他系统使用的包名都是一样的. MacOS: brew install the_ ...
    
			
    2. 
						
  2. 一个涉及到浮点寄存器的CM
			
    这次找小伙伴要了他的一个CM,怎么说呢,这CM让我学到了不少,其实搞出来后感觉不难,就是有不少FPU浮点相关的指令和FPU寄存器完全没学过,查了不少资料,学到了很多 打开是这样 无壳程序,我们直接od ...
    
			
    3. 
						
  3. 【配置详解】Quartz配置文件详解
			
    我们通常是通过quartz.properties属性配置文件(默认情况下均使用该文件)结合StdSchedulerFactory 来使用Quartz的.StdSchedulerFactory 会加载属 ...
    
			
    4. 
						
  4. hihoCoder week17 最近公共祖先·三 lca st表
			
    记录dfs序列,dfn[tot] 记录第tot次访问的节点 然后查两点在dfs序中出现的第一次 id[u] id[v] 然后  找 dep[k] = min( dep[i] ) {i 属于 [id[u ...
    
			
    5. 
						
  5. 题解—— 洛谷 p1993 小K的农场（差分约束&负环判断）
			
    看到题就可以想到差分约束 判断负环要用dfs,bfs-spfa会TLE 4个点 bfs-spfa #include <cstdio> #include <algorithm>  ...
    
			
    6. 
						
  6. (转载)一张表搞清楚西门子S7系列标准DB块与优化DB块
			
    在TIA Portal中为S7-1200/S7-1500 CPU 添加一个 DB 块时,其缺省属性为优化的 DB ,优化的 DB 块与标准的 DB 块整体对比如下表所示: 项 标准 DB 优化 DB  ...
    
			
    7. 
						
  7. Unity3D学习笔记（二十六）：MVC框架下的背包系统（1）
			
    MVC背包 需求: 1.背包格子的装备是可以拖动的 2.装备栏的装备也是可以拖动的 3.当背包格子的装备拖动到装备栏时,如果是装备类型和装备栏类型是一致的能装上 4.背包的装备是按照顺序放在格子中的, ...
    
			
    8. 
						
  8. Linux下清空或删除大文件内容的2种方法
			
    在Linux终端下处理文件时,有时候我们想要直接清空文件的内容时但又不用使用任何Linux命令行编辑器,去打开这些文件.那如何才能达到这个目的呢? 1.通过重定向到NULL来清空文件内容 清空或者让一 ...
    
			
    9. 
						
  9. Codeforces 767E Change-free
			
    题目链接:http://codeforces.com/contest/767/problem/E 居然是一个瞎几把贪心(E比B水系列) 考虑要每一次操作至少要用${\left \lfloor \fra ...
    
			
    10. 
						
  10. 什么是可哈希的（hashable）
			
    如果一个对象在自己的生命周期中有一哈希值(hash value)是不可改变的,那么它就是可哈希的(hashable)的,因为这些数据结构内置了哈希值,每个可哈希的对象都内置了__hash__方法,所以 ...
    
			
    11.