精华内容
下载资源
问答
  • DIV 垂直居中

    2011-11-14 21:41:36
    DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中
  • div垂直居中

    2021-03-23 16:37:18
    div垂直居中 方案一:使用定位,父元素relative,子元素也设置定位absolute,top设置父级的一半“50%”,然后margin-top设置自身高度一半: <style> #father { width: 1000px; height: 300px; background...

    div垂直居中


    方案一:使用定位,父元素relative,子元素也设置定位absolute,top设置父级的一半“50%”,然后margin-top设置自身高度一半:

    
    <style>
        #father {
            width: 1000px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
     
       #son {
            height: 100px;
            background-color: green;
            position: absolute;
            top: 50%;
            margin-top: -50px;
    }
    
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    

    如果子级元素高度不固定的话,就用css3的transform,设置y轴的偏移为-50%

    #son {
            width: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            transform: translateY(-50%);
    }
    
    

    还有一种方法用flex

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            align-items: center;
        }
     
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    
    

    行内元素的垂直居中,给父元素设置display:table-cell;和vertical-align: middle;属即可:

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: table-cell;
            vertical-align:middle;
        }
     
        #son {
            background-color: green;
        }
    </style>
     
    <div id="father">
        <span id="son">啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
    </div>
    
    

    本文转载自https://blog.csdn.net/weixin_37580235/article/details/82317240

    展开全文
  • Div垂直居中

    2019-05-27 22:51:37
    Div垂直居中 Flex 布局 不考虑兼容老式浏览器的话,用Flex布局简单直观一劳永逸: parentElement{ display:flex;/*Flex布局*/ display:-webkit-flex;/*Safari*/ justify-content:center;/*要加上*//*水平...
    1. Div垂直居中
      1. Flex 布局

    不考虑兼容老式浏览器的话,用Flex布局简单直观一劳永逸:

    parentElement{

        display:flex;/*Flex布局*/

        display: -webkit-flex; /* Safari */

       justify-content:center;/*要加上*//*水平居中 IE11*/

        align-items:center;/*指定垂直居中*/

    }

     

      1. 绝对定位+margin:auto

    div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】,

    兼容性:,IE7及之前版本不支持

    div{

    width: 200px;

    height: 200px;

    background: green;

    position:absolute;

    left:0;

    top: 0;

    bottom: 0;

    right: 0;

    margin: auto;

    }

     

      1. 绝对定位+margin负边距

    div绝对定位水平垂直居中【margin 负间距】,这或许是当前最流行的使用方法。

    div{

    width:200px;

    height: 200px;

    background:green;

    position: absolute;

    left:50%;

    top:50%;

    margin-left:-100px;

    margin-top:-100px;

    }

     

      1. 绝对定位+transform

    div绝对定位水平垂直居中【Transforms 变形】

    兼容性:IE8不支持;

    div{

    width: 200px;

    height: 200px;

    background: green;

    position:absolute;

    left:50%; /* 定位父级的50% */

    top:50%;

    transform: translate(-50%,-50%); /*自己的50% */

    }

    展开全文
  • css的div垂直居中的方法,百分比div垂直居中 前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别...

    css的div垂直居中的方法,百分比div垂直居中

    前言

    我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下。

    固定高宽div垂直居中

    enter image description here

    如上图,固定高宽的很简单,写法如下:

     position: absolute;
     left: 50%;
     top: 50%;
    width:200px;
    height:100px;
    margin-left:-100px;
    margin-top:-50px;

    不固定高宽div垂直居中的方法

    方法一:

    用一个“ghost”伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中,非常巧妙。但是这个方法要求待居中的元素是 inline-block,不是一个真正通用的方案。

    html如下:

    <div class="block" style="height: 300px;">
    
        <div class="centered">
            <h1>haorooms案例题目</h1>
            <p>haorooms案例内容,haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
        </div>
    
    </div>

     

    css如下:

    /* This parent can be any width and height */
    .block {
      text-align: center;
    }
    
    /* The ghost, nudged to maintain perfect centering */
    .block:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em; /* Adjusts for spacing */
    }
    
    /* The element to be centered, can
       also be of any width and height */ 
    .centered {
      display: inline-block;
      vertical-align: middle;
      width: 50%;
    }

    方法二:

    可以用table布局方法,但是这种方法也有局限性!

    写法如下:

    <table style="width: 100%;">
      <tr>
         <td style="text-align: center; vertical-align: middle;">
              Unknown stuff to be centered.
         </td>
      </tr>
    </table>

    由于table写法比较费时,你也可以用div代替table,写法如下:

    html:

    <div class="something-semantic">
       <div class="something-else-semantic">
           Unknown stuff to be centered.
       </div>
    </div>

    css:

    .something-semantic {
       display: table;
       width: 100%;
    }
    .something-else-semantic {
       display: table-cell;
       text-align: center;
       vertical-align: middle;
    }

     

    方法三,终极解决方法:

    以上2中方法可能都有其局限性,我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法!但是方法是css3的写法,想兼容IE8的童鞋们,建议用上面的方法!

    方法和我们固定高宽的差不多,但是不用margin我们用的是 translate()

    demo如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>haorooms不固定高度div写法</title>
    
        <style>
    .center {
      position: fixed;
      top: 50%;
      left: 50%;
      background-color: #000;
      width:50%;
      height: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    }
    
    
        </style>
    </head>
    <body>
        <div class="center"></div>
    </body>
    </html>

     

    我上面的css只是针对webkit内核的浏览器,其他内核浏览器写法如下:

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

     

    关于每个浏览器的写法,可以看看我之前的一篇文章:http://www.haorooms.com/post/css_common

    有些弹出层的样式,也可以用这个方法居中

    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    css3不定宽高水平垂直居中

    只要三句话就可以实现不定宽高水平垂直居中。

    justify-content:center;//子元素水平居中
    align-items:center;//子元素垂直居中
    display:-webkit-flex;

     

    在父级元素上面加上上面3句话,就可以实现子元素水平垂直居中。

    运用margin:auto进行垂直居中

    margin的值设置为auto,可以让我们对剩余空间进行分配!我们知道,块级元素设置为margin:0 auto;可以左右居中显示!那有没有办法让margin设置为margin:auto之后,上下左右都居中呢?上下左右都居中,就可以实现我们的垂直居中了!

    答案是有的,只要我们让上下有足够的空间,就可以让margin的auto来分配上下空间。

    我们可以利用定位的方式,让margin上下左右都有足够的空间!那么就可以用margin:auto来实现垂直居中了!

    实现html如下:(做一个简单的垂直弹框)

    <div class="father">
        <div class="son"></div>
    </div>

     

    css代码如下,很简单,兼容性也蛮好,支持IE8+

    .father{position:fixed;width:100%;height:100%;top;0;left:0;background-color:rgba(0,0,0,.7);}
    .son{position: absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;margin:auto;background-color:red;}

     

    这样就可以实现垂直居中了,是不是很简单?!!

     

    原文链接:https://www.haorooms.com/post/css_div_juzhong

    posted @ 2019-01-28 11:53 Dawnzhang 阅读(...) 评论(...) 编辑 收藏
    展开全文
  • 该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
  • 简单了解一下:   &lt;!DOCTYPE html&gt; &lt;html lang="...DIV垂直居中在可视区域/有固定定位的导航菜单以下可视区域垂直居中&lt;/title&gt; &lt;script type=&quo

    简单了解一下:

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>DIV垂直居中在可视区域/有固定定位的导航菜单以下可视区域垂直居中</title>
    	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    	<style>
    		body{margin: 0;padding: 0;}
    	</style>
    </head>
    <body>
    <div style="width: 100%;height: 80px;background: #1d18ff;position: fixed;top: 0;z-index: 100;"></div>
    <div class="content" id="content" style="background: #ffa0be;height: 500px;">
    	Hello World
    </div>
    </body>
    <script type="text/javascript">
    	$(function () {
    		var wheight = $(window).height();//可视区域高度
    		var cheight = $('#content').height();//内容高度
    
    		//说明:需要弄清楚内容相对的位置
    
    		/* start */
    		//没有导航菜单的情况
    		// var centerh = (wheight-cheight)/2;
    		// $('#content').css('margin-top',centerh+'px');
    		/* end */
    
    
    		/* start */
    		//导航菜单固定定位的情况->主要是固定的那一部分也需要平分高度
    		/*
    		//第一种
    		var navh = wheight-80;//计算方式:首先 可视区域高度 减去 导航菜单的高度 = 新高度
    		var laveh = navh-cheight;//计算方式:然后 新高度 减去 内容高度 = 剩余高度
    		var equalh = laveh/2;//计算方式:接着 剩余高度 除以2 = 平分高度
    		var centerh = equalh+80;//计算方式:最后 平分高度 加上 导航菜单高度 = 居中高度
    		*/
    
    
    		/*
    		//第二种
    		var laveh = wheight-cheight;//计算方式:然后 可视区域高度 减去 内容 的高度 = 剩余高度
    		var equalh = laveh/2;//计算方式:接着 剩余高度 除以2 = 平分高度
    		var centerh = equalh+(80/2);//计算方式:最后 平分高度 加上 导航菜单高度 除以2 = 居中高度
    		*/
    
    
    		//整理后的计算方式:((可视区域高度 减去 内容高度) 加上 导航高度) 除以2 = 居中高度
    		var centerh = ((wheight-cheight)+80)/2;
    		$('#content').css('margin-top',centerh+'px');
    		/* end */
    
    	});
    </script>
    </html>
    大家觉得哪一种方式比较适合,欢迎大家一起来学习,有好的思路一起探讨!

     

    展开全文
  • DIV垂直居中

    2011-12-18 11:07:11
    DIV垂直居中代码,网上找到的
  • 昨夜与群友讨论图片垂直居中时,突然想到与这很相像的DIV垂直居中效果.raozou分享了他的效果代码,今将其整理,特贴下来大家一起分享
  • 前言我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定...固定高宽div垂直居中如上图,固定高宽的很简单,写法如下:position: absolute;left: 50%;top: 50%;width:200px;h...
  • 针对学员疑问“div垂直居中?”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程,课程包含两方面:1、文本垂直居中的解决方案;2、块级元素垂直居中的解决方案。
  • 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div...固定高宽div垂直居中 position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-le...
  • div 垂直居中

    2017-06-14 10:19:52
    小的div在大的div垂直居中 方法一: 1、代码: 1 div style="width:200px;height:200px;border:solid blue;position:relative;"> 2 div style="width:100px;height:100px;margin: auto; position: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,124
精华内容 2,849
关键字:

div垂直居中