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. Java TreeSet的定制排序
			
    注:只贴出实现类 package Test3; import java.util.Comparator;import java.util.TreeSet; public class Test { pu ...
    
			
    2. 
						
  2. MongoDB ReplicaSet 集群搭建
			
    说明 本文创建的集群的名字为test,在同一台机器上创建了三个mongo实例,端口不同即可. 安装mongodb的教程,之前总结过,请参考:CentOS安装MongoDB笔记 创建实例 # 本机默认原 ...
    
			
    3. 
						
  3. 集训DAYn——拉格朗日插值法
			
    看zzq大佬的博客,看到了这个看似很深奥的东西,实际很简单(反正比FFT简单,我是一个要被FFT整疯了的孩子) 拉格朗日插值法 是什么 可以找到一个多项式,其恰好在各个观测点取到观测到的值.这样的多项 ...
    
			
    4. 
						
  4. upc组队赛1 黑暗意志【stl-map】
			
    黑暗意志 题目描述 在数千年前潘达利亚从卡利姆多分离之时,迷雾笼罩着这块新形成的大陆,使它不被外来者发现.迷雾同样遮蔽着这片大陆古老邪恶的要塞--雷神的雷电王座.在雷神统治时期,他的要塞就是雷电之王力 ...
    
			
    5. 
						
  5. ZOJ 3593 One Person Game（ExGcd + 最优解）题解
			
    思路:题意转化为求 (ax+by=dis) || (ax+cy=dis) || (bx+cy=dis) 三个式子有解时的最小|x| + |y|.显然求解特解x,y直接用扩展欧几里得,那么怎么求|x|  ...
    
			
    6. 
						
  6. 数据库03_SQL语句
			
    由于在笔试中遇到写sql语句的题目,犯了低级错误,这里学习并总结一下,遇到相关的继续更新... 数据定义 1.创建数据库 create database testdb; 2.创建空表 需要指明表明.字 ...
    
			
    7. 
						
  7. LOJ 6485 LJJ学多项式
			
    前言 蒟蒻代码惨遭卡常,根本跑不过 前置芝士--单位根反演 单位根有这样的性质: \[ \frac{1}{n}\sum_{i=0}^{n-1}\omega_{n}^{ki}=\left[n|k\rig ...
    
			
    8. 
						
  8. propsData 选项 全局扩展的数据传递
			
    propsData 不是和属性有关,他用在全局扩展时进行传递数据,结合自定义属性获取属性值的props一起使用 html <div id="app"> <regi ...
    
			
    9. 
						
  9. javaScript 内置对象-Array数组
			
    Array 对象方法 方法 描述 concat() 连接两个或更多的数组,并返回结果. join() 把数组的所有元素放入一个字符串.元素通过指定的分隔符进行分隔. pop() 删除并返回数组的最后一 ...
    
			
    10. 
						
  10. Win10远程桌面可能是由于CredSSP加密Oracle修正
			
    win10更新1083之后,远程桌面就会连接失败,显示如下: 根据微软官方的说法是更改了安全策略: https://support.microsoft.com/zh-cn/help/4093492/c ...
    
			
    11.